Introduction
WunderUI is a design system and React component library for the screens that take the longest to build: dashboards, data grids, boards, settings and AI chat. One token system, light and dark, and a Figma library that matches the code one to one.
What WunderUI is
Most component libraries stop at buttons and inputs, and you assemble everything else yourself. WunderUI covers that part too: a data grid with sorting, search and column resizing, a kanban board, charts, an app shell with six sidebar modes, a chat interface with streaming messages and tool calls.
Every component is a normal React component that you import from . There is no wrapper to learn and no runtime theme object. Styling comes from Tailwind v4 classes and CSS variables, so you can override anything the way you already style your app.
What ships
| Part | What it is | Get it |
|---|---|---|
| Components | 201 React components in 8 groups, each with live examples, props and code. | |
| UI Blocks | 314 ready screens in seven categories: auth, app, data, commerce, AI, media and support. Each comes in light, dark and mobile. | WunderUI CLI |
| Templates | Complete starting points: dashboard, inbox, settings, sign-in and an agent workspace. | Templates |
| Figma library | Every component, token and block as Figma components and variables, named the same as in code. | Free components in the Figma Community file; Pro components, blocks and templates with WunderUI Pro |
| AI context | An MCP server, DESIGN.md, design.json and llms.txt, so coding agents build with WunderUI instead of guessing. | Build with AI |
Free and Pro
The components come in two tiers. Each component page shows its tier as a badge next to the group name, and the sidebar lists them in two sections.
| Tier | Groups | License |
|---|---|---|
| Core components · Free (80) | Core Elements, Feedback & Overlays, Forms | Free license — personal use. The code is open, except Dropdown Menu, Kanban, List View and Table, whose code comes with WunderUI Core and Pro. |
| Pro components (121) | AI & Agents, Block Parts, Data & Charts, KPI / Metric Card, Navigation & Layout | Standard Commercial License — the code comes with WunderUI Core and Pro. |
The documentation is open for everything, Pro included: every example runs live on its page. The code of the Pro components and of the four locked core components unlocks with a license.
How it is built
| Layer | What WunderUI uses |
|---|---|
| Behaviour and accessibility | Base UI primitives: focus management, keyboard support and ARIA come from a library that tests them, not from hand-written code. |
| Styling | Tailwind CSS v4 with its CSS-first setup. No tailwind.config.js, no plugin. |
| Tokens | CSS variables for color, radius, typography and motion, each one traced to a Figma variable. |
| React | React 19, Server Components supported. Interactive components are client components. |
| Types | TypeScript types ship with the package. |
Principles
| Principle | What it means for you |
|---|---|
| Figma and code say the same thing | Names, variants and tokens match. A designer's handoff maps straight to props. |
| Tokens, not values | No component hard-codes a color, radius or duration. Change a token and everything that uses it follows. |
| Accessible by default | Text contrast meets WCAG AA in light and dark, every control is reachable by keyboard, and motion respects reduced motion. |
| Motion with a purpose | Six durations and four easing curves. Things arrive fast and settle, and leave faster than they came. |
| Consistent shapes | Button-like controls share one radius, and a hover always takes the shape of the surface under it. |