Components

The 32 components in src/components/ui, grouped by what they do. Each card opens its page: every variant live, the props, and the code to copy. The previews are the real components.

Actions

Things you press: a command, or a state you switch on and off.

ButtonVariants, sizes, icon sizes and shapes of the house button.

ToggleA pressable on/off button, tinted when pressed.

Toggle groupA joined set of toggles for one-of-many or many-of-many.

Form & input

Fields and controls that take a value, and the label that names them.

CheckboxA square check, ink when on, always paired with a label.

InputThe single-line text field, plus the bare variant for menu search.

Input groupA field with addons: icons, text and buttons inside one box.

LabelNames a form control and follows its disabled state.

SelectPick one option from a list, with outline or tint triggers.

SliderA range control: tint track, ink range and thumb, one or two values.

SwitchAn on/off control in two sizes, ink when on.

TextareaThe multi-line text field, plus the bare variant the composer uses.

Overlays & menus

Surfaces that float over the page: menus, previews, panels and the modal. Drawn open here; open them for real on their pages.

CommandThe command palette: search input, grouped items and shortcuts.

Context menuThe right-click menu, sharing items and strings with the dropdown.

DialogThe modal: overlay, centred content, title, description and close.

Dropdown menuA menu from a trigger, with groups, separators, checkbox and radio items.

Hover cardA preview card that opens on hover or focus of a link.

PopoverFloating content from a trigger; the caller sets width and padding.

SheetA panel that slides in from any edge of the viewport.

TooltipA short ink label on hover or focus, for icon-only controls.

Display & layout

Content, structure and status: the pieces that show things and hold them in place.

AvatarA person or agent at 24, 32 or 40px, image or initials, with a hairline rim.

BadgeThe 20px count, label and status pill in every variant.

Border beamA travelling light around the edge of one child, mono unless a surface earns colour.

CardThe rounded surface with header, title, description, content and footer slots.

CollapsibleAn unstyled disclosure: a trigger that shows and hides its content.

Icon tileA square, soft or round ground for an icon or a letter.

KbdA keycap for shortcuts, alone or grouped.

Nav itemA sidebar row: a pill that fills on hover and when active.

OverlineThe small caps heading over a group of items.

Scroll areaA scroll container with the house scrollbar thumb.

SeparatorA horizontal or vertical hairline between groups.

SkeletonA pulsing tint placeholder in the shape of content that is loading.

TabsSwitch between views with a pill track or an underline row.

Patterns

Composites in src/components/patterns. A shape earns a pattern only when two or more pages use it with the same intent.

PageHeading

patterns/page-heading.tsx

The h1, subtitle and actions row on every resource page.

SearchInput

patterns/search-input.tsx

The 36px pill search field every list page shares.

EmptyState

patterns/empty-state.tsx

Bubble or plain: an icon, a title, one line and an action.

ShowArchivedSwitch

patterns/show-archived-switch.tsx

The labelled switch beside list headers.