Components

43 components for React and Tailwind, ready to copy. Everything shares the same tokens.

Actions

Button: A keycap with a real bottom edge. It lifts on hover and sinks when pressed.
Segmented control: One choice from a short set. A raised pill slides to the chosen option.
Dropdown menu: A menu of actions with shortcuts, checkable items and nested submenus.
Button group: Buttons fused into one row, for ranges and paired actions.
Copy button: Copies a value and confirms with a check for a moment.

Input: A text field with optional leading and trailing slots. Pair it with Field for label, hint and error.
Textarea: A multi-line field that shares the input's border, focus ring and error states.
Select: A listbox for picking one value, with groups, labels and disabled options.
Checkbox: A binary or indeterminate choice, for lists where many items can be on.
Radio group: One choice from a visible set. RadioCard wraps each option in a selectable panel.
Switch: An on and off setting that applies immediately.
Slider: Pick a value or a range by dragging. Pass two values for a range.
Combobox: A select with a search field, for option lists too long to scan.
Input OTP: One-time code entry with auto-advance, paste support and grouped cells.
Password input: A password field with a show and hide key and an optional strength meter.

Dialog: A modal window that traps focus and returns it to the trigger when closed.
Popover: Rich, interactive content anchored to a trigger.
Tooltip: A short label on hover or focus, with an optional key hint. Wrap your app in TooltipProvider.
Sheet: A panel that slides in from an edge, for forms and details that keep page context.
Alert dialog: A modal that interrupts to confirm an important or irreversible action.

Toast: Brief, non-blocking messages. Mount Toaster once and call toast() from anywhere.
Alert: An inline message about the state of a page or section.
Progress: Linear progress for a task, and Meter, a cell meter for quotas.
Skeleton: A shimmering placeholder that holds the shape of content while it loads.
Spinner: An indeterminate loading indicator that inherits the text colour.

Card: A hairline-bordered surface with header, content and a footer strip.
Avatar: An image with initials as fallback, a presence dot, and an overlapping group.
Badge: A compact label for status, version or category.
Kbd: A keyboard key, for shortcuts in menus, tooltips and docs.
Separator: A hairline between groups of content, horizontal or vertical.
Table: Ruled data table parts with selectable rows and a sortable header button.

Tabs: Switch between views in place. Two variants: a tray with a sliding pill, and a line.
Accordion: Stacked sections that expand one or many at a time.
Breadcrumb: Where the current page sits in the hierarchy, with links back up.
Pagination: Move through pages of results, with gaps for long ranges.

Bar chart: Rounded bars on a track. Bars grow in; hover or focus a bar for its value.
Sparkline: A small trend line for tables, stats and cards.
Line chart: Lines with a y axis and legend. Dash a series for targets or last period. Hover or arrow through points.
Bar list: Ranked rows with a bar behind each name, for top pages, sources or countries.
Stage bars: Horizontal bars split into stages, such as a pipeline per rep or sleep phases per night.
Chart card: The shell every chart card shares: title, number and change, the chart on a white panel, a footer.
Steps card: Daily steps against a dashed goal line. Days over the goal are lit.
Most active days: Seven columns for the week with the busiest day lit and named.