# Parlemen UI

> Soft clay React components you copy into your app. Built on Radix, Tailwind v4 and motion, installable with the shadcn CLI. Semantic colour roles, light and dark, Phosphor icons.

## Rules for assistants

- Install with the shadcn CLI. Add the registry once: `npx shadcn@latest registry add "@parlemen=https://ui.parlemen.dev/r/{name}.json"`, then `npx shadcn@latest add @parlemen/<name>`. Projects must be initialised with `npx shadcn@latest init -b radix`.
- Install `@parlemen/theme @parlemen/providers` first. Theme ships the tokens (tonal scales, semantic roles, light + dark, clay shadows) as app/parlemen.css. In app/layout.tsx import "./parlemen.css" instead of globals.css, load Bricolage_Grotesque (--font-display) and JetBrains_Mono (--font-code) from next/font/google, add suppressHydrationWarning to <html>, and wrap children in <Providers> from @/components/ui/providers.
- Use semantic colour classes only: `bg-primary text-on-primary`, `bg-primary-container text-on-primary-container`, `bg-surface`, `bg-surface-sunken`, `text-on-surface`, `text-on-surface-muted`. Roles: primary, secondary, tertiary, accent, success, warning, danger, info. Never raw hex or palette classes.
- Clay look: raised = `bg-surface shadow-clay-sm`, sunken = `bg-surface-sunken shadow-well`. No hard borders. Rounded everything.
- Icons: Phosphor only (`@phosphor-icons/react`, `XxxIcon`). weight="bold" by default, "fill" for active, "duotone" for big decorative icons. Never hand-draw SVG icons.
- Motion: `motion/react` with presets from `@/lib/motion` (springs.snappy | squish | bouncy | gentle).
- Components take `color` (role) and `variant` (solid | soft | outline | ghost) props, e.g. `<Button variant="soft" color="danger">`.
- No browser-drawn controls (native select, date, color, range, file inputs). Use Select, Calendar + Popover, Slider.

## Guides

- [Introduction](https://ui.parlemen.dev/docs/introduction)
- [Installation](https://ui.parlemen.dev/docs/installation)
- [AI & MCP](https://ui.parlemen.dev/docs/ai)
- [Colors](https://ui.parlemen.dev/docs/colors)
- [Icons](https://ui.parlemen.dev/docs/icons)
- [Motion](https://ui.parlemen.dev/docs/motion)
- [Theming](https://ui.parlemen.dev/docs/theming)

## Components

- [Accordion](https://ui.parlemen.dev/docs/accordion.md): Stacked clay cards that spring open to reveal more.
- [Alert](https://ui.parlemen.dev/docs/alert.md): A soft callout with a role colour, icon and optional dismiss.
- [Alert Dialog](https://ui.parlemen.dev/docs/alert-dialog.md): A modal that asks for confirmation before something drastic.
- [Aspect Ratio](https://ui.parlemen.dev/docs/aspect-ratio.md): Keep media at a fixed ratio inside a clay frame.
- [Avatar](https://ui.parlemen.dev/docs/avatar.md): Clay circles with initials, plus a group that fans out.
- [Badge](https://ui.parlemen.dev/docs/badge.md): Small pill for status and labels.
- [Brand](https://ui.parlemen.dev/docs/brand.md): Live mascot and rolling wordmark from the company site.
- [Breadcrumb](https://ui.parlemen.dev/docs/breadcrumb.md): Shows where you are, with the current page as a soft pill.
- [Button](https://ui.parlemen.dev/docs/button.md): Puffy clay button that squishes when you press it.
- [Calendar](https://ui.parlemen.dev/docs/calendar.md): Round clay days for picking a date or a range.
- [Callout](https://ui.parlemen.dev/docs/callout.md): Article asides with an icon badge and a curved rail, for notes, warnings and live examples.
- [Card](https://ui.parlemen.dev/docs/card.md): A soft raised surface for grouping content.
- [Carousel](https://ui.parlemen.dev/docs/carousel.md): Swipeable slides with clay arrows and a sliding dot pill.
- [Chart](https://ui.parlemen.dev/docs/chart.md): Recharts wrapped with semantic colours, clay tooltips and pill legends.
- [Checkbox](https://ui.parlemen.dev/docs/checkbox.md): Sunken box that fills and draws its check in.
- [Collapsible](https://ui.parlemen.dev/docs/collapsible.md): Show and hide a section with a gentle height spring.
- [Command](https://ui.parlemen.dev/docs/command.md): Searchable command palette with a sliding selection pill.
- [Context Menu](https://ui.parlemen.dev/docs/context-menu.md): Right-click menu with the same clay feel as the dropdown.
- [Data Table](https://ui.parlemen.dev/docs/data-table.md): Sortable, searchable, selectable table built on TanStack Table.
- [Date Picker](https://ui.parlemen.dev/docs/date-picker.md): A calendar that pops out of a button.
- [Dialog](https://ui.parlemen.dev/docs/dialog.md): A modal window over a blurred backdrop.
- [Drawer](https://ui.parlemen.dev/docs/drawer.md): Draggable bottom panel with a sunken grab handle.
- [Dropdown Menu](https://ui.parlemen.dev/docs/dropdown-menu.md): A menu of actions that pops out of a button.
- [Empty](https://ui.parlemen.dev/docs/empty.md): A friendly empty state with a floating icon tile.
- [Footer](https://ui.parlemen.dev/docs/footer.md): Cloudy footer with the hanging mascot, link columns and socials.
- [Form](https://ui.parlemen.dev/docs/form.md): react-hook-form + zod bindings with springy error messages.
- [Hover Card](https://ui.parlemen.dev/docs/hover-card.md): Preview content when hovering a link.
- [Input](https://ui.parlemen.dev/docs/input.md): Recessed fields, plus InputGroup for addons and an action button.
- [Input OTP](https://ui.parlemen.dev/docs/input-otp.md): One-time code tiles with a blinking caret.
- [Kbd](https://ui.parlemen.dev/docs/kbd.md): Little raised keys for shortcuts.
- [Label](https://ui.parlemen.dev/docs/label.md): Accessible label for form controls.
- [Menubar](https://ui.parlemen.dev/docs/menubar.md): A puffy app menu bar with springy menus.
- [Navbar](https://ui.parlemen.dev/docs/navbar.md): Floating pill header with links and actions.
- [Navigation Menu](https://ui.parlemen.dev/docs/navigation-menu.md): Site navigation with a sliding pill and a morphing panel.
- [Pagination](https://ui.parlemen.dev/docs/pagination.md): Page pills with a sliding active page.
- [Popover](https://ui.parlemen.dev/docs/popover.md): Raised clay panel anchored to a trigger.
- [Progress](https://ui.parlemen.dev/docs/progress.md): A sunken track with a springy clay fill.
- [Radio Group](https://ui.parlemen.dev/docs/radio-group.md): Pick one. The dot pops in.
- [Resizable](https://ui.parlemen.dev/docs/resizable.md): Drag clay grips to resize panels.
- [Scroll Area](https://ui.parlemen.dev/docs/scroll-area.md): Custom scrolling with the clay pill thumb.
- [Select](https://ui.parlemen.dev/docs/select.md): Custom dropdown in a raised clay popover.
- [Separator](https://ui.parlemen.dev/docs/separator.md): A soft groove pressed into the surface.
- [Sheet](https://ui.parlemen.dev/docs/sheet.md): A panel that slides in from any edge.
- [Sidebar](https://ui.parlemen.dev/docs/sidebar.md): Grouped vertical navigation.
- [Skeleton](https://ui.parlemen.dev/docs/skeleton.md): Sunken shimmering placeholders while content loads.
- [Slider](https://ui.parlemen.dev/docs/slider.md): Drag a clay thumb along a sunken track.
- [Sonner](https://ui.parlemen.dev/docs/sonner.md): Clay toasts with coloured icons per type.
- [Spinner](https://ui.parlemen.dev/docs/spinner.md): Three clay dots hopping in turn.
- [Switch](https://ui.parlemen.dev/docs/switch.md): Clay thumb that slides and squashes.
- [Table](https://ui.parlemen.dev/docs/table.md): A raised panel for rows of data.
- [Tabs](https://ui.parlemen.dev/docs/tabs.md): Switch between views inside a pressed-in track.
- [Textarea](https://ui.parlemen.dev/docs/textarea.md): Recessed multi-line field that can auto-grow.
- [Toggle](https://ui.parlemen.dev/docs/toggle.md): Two-state button that presses into the clay.
- [Toggle Group](https://ui.parlemen.dev/docs/toggle-group.md): Toggles in a track with a sliding pill.
- [Tooltip](https://ui.parlemen.dev/docs/tooltip.md): Tiny inverse pill that pops in on hover.
- [Typography](https://ui.parlemen.dev/docs/typography.md): Headings, text, quotes, lists and tables on tokens.

## Optional

- [Full docs in one file](https://ui.parlemen.dev/llms-full.txt)
- [Registry index](https://ui.parlemen.dev/r/registry.json)