Components

Accordion

Stacked clay cards that spring open to reveal more.

Alert

A soft callout with a role colour, icon and optional dismiss.

Alert Dialog

A modal that asks for confirmation before something drastic.

Aspect Ratio

Keep media at a fixed ratio inside a clay frame.

Avatar

Clay circles with initials, plus a group that fans out.

Badge

Small pill for status and labels.

Brand

Live mascot and rolling wordmark from the company site.

Breadcrumb

Shows where you are, with the current page as a soft pill.

Button

Puffy clay button that squishes when you press it.

Calendar

Round clay days for picking a date or a range.

Callout

Article asides with an icon badge and a curved rail, for notes, warnings and live examples.

Card

A soft raised surface for grouping content.

Carousel

Swipeable slides with clay arrows and a sliding dot pill.

Chart

Recharts wrapped with semantic colours, clay tooltips and pill legends.

Checkbox

Sunken box that fills and draws its check in.

Collapsible

Show and hide a section with a gentle height spring.

Command

Searchable command palette with a sliding selection pill.

Context Menu

Right-click menu with the same clay feel as the dropdown.

Data Table

Sortable, searchable, selectable table built on TanStack Table.

Date Picker

A calendar that pops out of a button.

Dialog

A modal window over a blurred backdrop.

Drawer

Draggable bottom panel with a sunken grab handle.

Dropdown Menu

A menu of actions that pops out of a button.

Empty

A friendly empty state with a floating icon tile.

Footer

Cloudy footer with the hanging mascot, link columns and socials.

Form

react-hook-form + zod bindings with springy error messages.

Hover Card

Preview content when hovering a link.

Input

Recessed fields, plus InputGroup for addons and an action button.

Input OTP

One-time code tiles with a blinking caret.

Kbd

Little raised keys for shortcuts.

Label

Accessible label for form controls.

Menubar

A puffy app menu bar with springy menus.

Navbar

Floating pill header with links and actions.

Navigation Menu

Site navigation with a sliding pill and a morphing panel.

Pagination

Page pills with a sliding active page.

Popover

Raised clay panel anchored to a trigger.

Progress

A sunken track with a springy clay fill.

Radio Group

Pick one. The dot pops in.

Resizable

Drag clay grips to resize panels.

Scroll Area

Custom scrolling with the clay pill thumb.

Select

Custom dropdown in a raised clay popover.

Separator

A soft groove pressed into the surface.

Sheet

A panel that slides in from any edge.

Sidebar

Grouped vertical navigation.

Skeleton

Sunken shimmering placeholders while content loads.

Slider

Drag a clay thumb along a sunken track.

Sonner

Clay toasts with coloured icons per type.

Spinner

Three clay dots hopping in turn.

Switch

Clay thumb that slides and squashes.

Table

A raised panel for rows of data.

Tabs

Switch between views inside a pressed-in track.

Textarea

Recessed multi-line field that can auto-grow.

Toggle

Two-state button that presses into the clay.

Toggle Group

Toggles in a track with a sliding pill.

Tooltip

Tiny inverse pill that pops in on hover.

Typography

Headings, text, quotes, lists and tables on tokens.