Website · Components · Figma · Pricing
83 of the 222 WunderUI React components, free as source you own. Built on Base UI and Tailwind CSS v4, styled by the same tokens as the WunderUI Figma library, light and dark, accessible (WCAG AA contrast on every token pair), and documented with live examples on wunderui.com.
Copy the files into your project and they are yours: no package to update, no lock-in, MIT licence.
Requirements: React 19, Tailwind CSS v4, and the @/* path alias pointing at your source root (the default in Next.js projects).
The quick way: add components with the CLI — it writes the files, installs the dependencies and adds the styles:
npx wunderui-cli add button badge inputThen import the styles once (step 3) and use the components (step 4). npx wunderui-cli list --components shows all 83.
By hand:
1. Get the source and copy components/, lib/ and styles/wunderui.css into your source root (where @/ points):
npx degit wunder-ui/wunderui wunderui-freeFiles with the same name as components already in your project (button.tsx, badge.tsx …) are replaced — commit before you copy.
2. Install the dependencies:
npm install @base-ui/react @tiptap/extension-placeholder @tiptap/react @tiptap/starter-kit class-variance-authority cn lucide-react next-themes tw-animate-css3. Add the styles to your Tailwind entry file, after Tailwind:
@import "tailwindcss";
@import "./styles/wunderui.css";
@source "./components";4. Use a component:
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
export default function Page() {
return (
<div className="flex items-center gap-3">
<Button variant="primary">Save changes</Button>
<Badge color="green">Active</Badge>
</div>
)
}Every component has a page with examples, props and the matching Figma component on wunderui.com/components.
| Component | What it does | Import |
|---|---|---|
| Accordion | A vertically stacked set of collapsible panels, in card or divider style. | Accordion |
| Action Bar | A pill-shaped bar of bulk actions for a selection. It sits where you place it, so fix it to the bottom of the page yourself if it should float. | ActionBar |
| Agenda | A time-ordered list of scheduled events. | Agenda |
| Agenda Event | One event in an agenda list, with its start and end time, a color bar, details and guests. | AgendaEvent |
| Alert Dialog | A dialog for confirmations and destructive actions: a click outside does not close it, only a button or Escape does. | AlertDialog |
| Avatar | A user or entity's profile image with a text fallback. | Avatar |
| Avatar Group | A stack of overlapping avatars, with an optional overflow count. | AvatarGroup |
| Avatar Stack | Overlapping avatars with a “+N” count for everyone past the limit. | AvatarStack |
| Badge | A small status or category label in 12 colors and 6 styles. | Badge |
| Breadcrumb | Shows the user's location in a hierarchy, in the plain, border or underline style. |
Breadcrumb |
| Button | The main action trigger, in 10 variants, 2 shapes and 5 sizes. | Button |
| Button Group | A row of connected buttons sharing borders and outer corners, for view switchers or segmented actions. | ButtonGroup |
| Card | A bordered container for grouping related content. | Card |
| Carousel | A horizontally scrollable row of items with arrow controls. | Carousel |
| Checkbox | A single choice that is on or off, with an indeterminate state for “some selected”. | Checkbox |
| Collapsible | A single collapsible panel controlled by a trigger button. | Collapsible |
| Dialog | A modal window for focused tasks, built on Base UI. | Dialog |
| Divider with Label | A separator with a centered text label, e.g. for "or" between two sign-in options. | DividerWithLabel |
| Empty State | Placeholder shown when a list or search has no results. | EmptyState |
| File Tree | An indented list of folders and files: a tree with arrow-key navigation whose folders open and close, and onSelect reports the chosen file or folder. | FileTree |
| Floating TOC | A table of contents for an article, with a marker that follows the section in view. It does not stick by itself: put it in a sticky container to keep it on screen. |
FloatingToc |
| Holo Card | A card with a mouse-tracking spotlight/gradient shine effect. | HoloCard |
| Hover Card | A rich preview popup shown on hovering a trigger. | HoverCard |
| Icon Button | A square or circular button for a single icon action. | IconButton |
| Input | A single-line text field with sm/default/lg sizes and error state. | Input |
| Item Card | A generic row card: icon, title, description, meta, action. | ItemCard |
| Kbd | Displays a keyboard key or shortcut, e.g. inside a search input. | Kbd |
| Meter | A graphical display of a fixed value within a range, e.g. disk usage. | Meter |
| Pagination | Page navigation with Prev/Next and numbered pages, or a simple "Page X of Y" mode. | Pagination |
| Progress | A horizontal bar showing completion of a task. | Progress |
| Radio Group | A set of mutually exclusive options. | RadioGroup |
| Separator | A thin dividing line, horizontal or vertical, solid or dashed. | Separator |
| Skeleton | A pulsing placeholder shown while content is loading. | Skeleton |
| Slider | A draggable control for selecting one value or a range along a track. | Slider |
| Spinner | A spinning indicator for an in-progress loading state. | Spinner |
| Switch | A toggle control for a binary setting. | Switch |
| Table | Rows and columns with 23 ready-made cell types; for sorting and search use Data Grid. | Table |
| Tabs | Switches between related views in the same context. | Tabs |
| Textarea | A multi-line text field with sm/default/lg sizes and an optional character counter. | Textarea |
| Timeline | A vertical sequence of dated, dot-connected events. | Timeline |
| Timeline Event | One entry in an activity feed or history, with an avatar or status dot and a line to the next entry. | TimelineEvent |
| Toggle | A standalone two-state button that can be pressed or unpressed. | Toggle |
| Toolbar | A container for grouping a set of buttons and controls. | Toolbar |
| Tooltip | A short label shown on hover, in any of 4 directions. | Tooltip |
| Widget | A generic dashboard widget shell: header, body, footer. | Widget |
| Component | What it does | Import |
|---|---|---|
| Alert | An inline banner in 5 colors and 2 sizes, with an optional close button and action. | Alert |
| Emoji Picker | A grid of selectable emoji, typically shown inside a Popover. | EmojiPicker |
| Emoji Reaction Button | A toggleable emoji reaction with a count, like a Slack reaction. | EmojiReactionButton |
| Number Value | A large number with its change beside it: caret up or down, green or red. | NumberValue |
| Popover | A floating panel anchored to a trigger element. | Popover |
| Pressable Feedback | Wraps any content with a scale-down press animation. | PressableFeedback |
| Pull to Refresh | Drag down from the top of any content past a threshold to trigger an async refresh, with a rotating spinner and a rubber-band release. | PullToRefresh |
| Rating | An interactive star rating input. | Rating |
| Sheet | A panel that slides in from an edge of the screen — left, right, or bottom. | Sheet |
| Toast | A temporary notification that appears in the corner of the screen, with success/error/warning/info types. | Toaster |
| Trend Chip | A small pill showing a change, up or down, in seven icon styles. | TrendChip |
| Component | What it does | Import |
|---|---|---|
| Autocomplete | An input that suggests options as you type. | Autocomplete |
| Calendar | A month grid for picking one date or a range, with keyboard navigation and optional min, max and disabled days. | Calendar |
| Cell Color Picker | A compact color swatch picker for inline use in a Data Grid cell. | CellColorPicker |
| Cell Select | A compact select for inline use in a Data Grid cell. | CellSelect |
| Cell Slider | A compact progress/value slider for inline use in a Data Grid cell. | CellSlider |
| Cell Switch | A compact switch for inline use in a Data Grid cell. | CellSwitch |
| Checkbox Button Group | A multi-select group of toggle-styled buttons. | CheckboxButtonGroup |
| Checkbox Field | A checkbox with a clickable label and an optional description below it. | CheckboxField |
| Color Picker | Pick a colour: saturation and brightness, hue, opacity, eyedropper, HEX/RGB/HSL values and saved colours — inline or from a trigger field. | ColorPicker |
| Combobox | An input combined with a filterable list of predefined items to select. | Combobox |
| Date Picker | A Calendar inside a Popover, with Cancel/Apply actions. | DatePicker |
| Drop Zone | A drag-and-drop file upload target with a click-to-browse fallback. | DropZone |
| Field | Labelling and validation for a single form control — label, description, and error message. | Field |
| Fieldset | A native fieldset with a legend, for grouping related fields. | Fieldset |
| Form | A form wrapper that simplifies validation and submission. | Form |
| Form Actions | The row of buttons at the end of a form, aligned right, left or spread to both edges. | FormActions |
| Inline Select | A compact select meant to sit inline within a sentence of text. | InlineSelect |
| Input Group | Groups an input with leading/trailing addons — icons, buttons, or text. | InputGroup |
| Label | An accessible label for a form control. | Label |
| Native Select | A full-width styled select trigger and popup list. | NativeSelect |
| Number Field | A numeric input with increment/decrement buttons. | NumberField |
| Number Stepper | A +/- increment control for a bounded numeric value. | NumberStepper |
| OTP Field | A segmented input for one-time passwords and verification codes. | OtpField |
| Radio Button Group | A single-select group of toggle-styled buttons. | RadioButtonGroup |
| Rich Text Editor | A Tiptap-powered WYSIWYG editor with a formatting toolbar. | RichTextEditor |
| Selector Item | A list row pairing a leading icon/avatar and label/description with a trailing radio, checkbox, or switch. | SelectorItem |
| Textarea Field | A multi-line text input with a label and helper or error text. | TextareaField |
Give your coding agent the whole design system: tokens, prop signatures and examples for every component.
claude mcp add wunderui -- npx -y wunderui-mcpWorks with Claude Code, Cursor, Windsurf, Cline and Codex (wunderui-mcp). The repository also includes AGENTS.md with the rules agents should follow.
4 free skills that teach Claude Code, Codex, Cursor and other agents to set WunderUI up, build screens from the components, theme it in your brand colour and keep the tokens clean.
npx skills add wunder-ui/wunderui| Skill | What it does |
|---|---|
wunderui-screen |
Builds a complete React screen with WunderUI from a one-sentence request, within the user's plan (Free uses only the free components) — picks the components and a matching block layout, fills props from design.json, adds the empty, loading and error states that generated screens usually forget, uses motion tokens instead of raw milliseconds, and finishes with a typecheck and a build. |
wunderui-setup |
Sets up WunderUI in a React project from scratch to the first rendered screen — detects the framework, Tailwind version and existing tokens, puts DESIGN.md and design.json into the project, registers the WunderUI MCP server, wires styles.css and the @source path, renders a probe component and writes a setup report. |
wunderui-theme |
Generates a complete WunderUI brand theme from one brand colour (hex) — optionally an accent colour, a radius preference and a font — the eleven-step brand scale (--brand-50 … --brand-1000), the brand tokens derived from it (primary, primary-foreground, text-link, ring, tint and tint text, chart 1) for light and dark, a WCAG AA check of every key pair with shades moved automatically until they pass, and one CSS file to import after @wunderui/react/styles.css (globally or for one subtree), plus a report. |
wunderui-token-check |
Finds hard-coded colours, spacing and radii that bypass the WunderUI design tokens, maps each literal to the nearest token with a measured distance (ΔE for colour, px for spacing and radius), separates safe swaps from values too far from any token, replaces the safe ones and reports how much the look changed. |
More skills (motion audit, accessibility, Figma sync, refactor to WunderUI, the UI/UX auditor) come with WunderUI Pro.
The free components are the foundation. WunderUI Core and Pro add the rest of the system: 139 more components, ready-made screens and templates, the full Figma library and agent skills.
| Group | Components | Includes |
|---|---|---|
| AI & Agents | 45 | Activity Item, Agent Avatar, Agent Grid, Agent Lane, Agent Plan, Agent Status, … |
| Block Parts | 44 | Auth Heading, Backup Code, Checklist Task, Checkout Steps, Column Header, Command Item Row, … |
| Core Elements | 3 | Dropdown Menu, Kanban, List View |
| Data & Charts | 34 | Area Chart, Bar Chart, Bubble Chart, Bullet Chart, Candlestick Chart, Chart Card, … |
| KPI / Metric Card | 4 | KPI, KPI Group, Metric Card, Metric Group |
| Navigation & Layout | 9 | App Layout, Command, Context Menu, Navbar, Resizable, Scroll Area, … |
The code and the agent skills in this repository are MIT licensed. WunderUI Core and Pro components, blocks, templates and the Figma library are covered by the WunderUI licence.
This repository is generated from the WunderUI source with every release, so it does not take pull requests; please report bugs and ideas in Issues.