Overview
UI Lab is a React component library and design system built for accessible, themeable interfaces. It ships 39 components built on React Aria, a typed registry of pre-built patterns and elements, an MCP server for AI-assisted development, and a documentation site with live previews and an interactive theme configurator.
What's inside
The monorepo has four packages:
- ui-lab-components — the component library itself
- ui-lab-registry — typed registry of component metadata, patterns, elements, sections, and design tokens
- ui-lab-mcp — MCP server that exposes the library to AI assistants like Claude and Cursor
- apps/site — Next.js documentation site with live previews and a theme config tool
Components
39 components across layout, composition, action, input, information, feedback, navigation, container, and display categories. All built on React Aria for keyboard navigation, focus management, and screen reader support. Compound components like Card.Header/Body/Footer and Modal.Header/Body/Footer handle complex composition patterns.
Design system
Semantic color tokens with 8 families — background, foreground, accent, success, danger, warning, info — each with shades 50–950. Pre-defined color recommendations map component + intent pairs (e.g. button:danger) to complete CSS variable pairings with WCAG compliance notes.
MCP integration
The ui-lab-mcp package is a Model Context Protocol server that lets AI coding assistants query the library directly — searching components, fetching API docs, getting color pairings, and pulling pattern or element source — without pasting documentation into chat.
What I learned
Shipping a library with an MCP server alongside it changed how I think about documentation. The MCP forces the registry to be machine-readable in a way that also makes it more structured for humans. The theme system — especially preventing FOUC across server and client renders — required more careful coordination than expected between ThemeProvider, generateThemeScript, and localStorage.
Stack
- UI: React 19, React Aria, TypeScript
- Site: Next.js, Tailwind CSS, Shiki, GSAP
- Bundling: Vite, PostCSS
- Package manager: pnpm