# Component catalog — the fused index

> **Generated folder — never hand-edit.** Everything under `skills/design/components/` is emitted by the components-repo regen instruction set (`docs/playbooks/skills/case-studies/components-regen-spec.md`, run against the `@nurix/components` library checkout). Regeneration may reshape any file beneath this one; the design skill's only seam with this folder is this index.

**Load contract.** This index loads in **both** positions of the project's `primitives` switch (`design.md`, `primitives: nurix | native`) — it is how the skill knows what chrome *exists* to compose with. The per-category deep references beside it ([inputs](inputs.md), [overlays](overlays.md), [collections](collections.md), [navigation](navigation.md), [layout](layout.md), [feedback](feedback.md), [charts](charts.md), [typography](typography.md), [media](media.md), [motion](motion.md), [hooks](hooks.md), [utils](utils.md), plus [setup](setup.md) for install/Tailwind wiring) load **only under `primitives: nurix`**, and only when that category is touched.

**The ratchet.** Deep references bind only when `@nurix/components` is actually importable in the target project: the intake probe defaults the switch, the recorded `primitives:` line is the authority. Under `nurix`, a row binds to its **nurix** column and the category reference supplies the API. Under `native`, the per-category references never load; a row binds to its **shadcn** column (when the project uses shadcn/ui) or to the **fallback** column — a semantic-HTML/behavior spec the model implements with the incumbent stack.

Columns: `concept` (the composable idea) · `category` (which deep reference covers it) · `nurix` (symbols + `@nurix/components/<subpath>`; empty = the library has no primitive for this concept) · `shadcn` (shadcn/ui equivalent; `—` = none) · `fallback` (plain spec, always present).

```csv
concept,category,nurix,shadcn,fallback
button,inputs,Button (element/button),Button,"native <button>, variants via class, focus-visible ring"
text-input,inputs,"Input (element/input) — onSave commit, regex validator",Input,"<input type=text>, commit on blur/Enter"
number-input,inputs,"NumberInput (element/number-input) — min/max/step",—,"<input inputmode=numeric>, clamp on commit, Escape reverts"
textarea,inputs,"Textarea (element/textarea) — Cmd/Ctrl+Enter commits",Textarea,"<textarea>, blur commits, Escape resets draft"
inline-edit,inputs,"InlineEdit (element/inline-edit) — click-to-edit contentEditable span",—,"span[contenteditable] reading as a label until focused, Enter/blur commits, Escape reverts"
checkbox,inputs,Checkbox (element/checkbox),Checkbox,"<input type=checkbox> + label, indeterminate via JS"
switch,inputs,Switch (element/switch),Switch,"role=switch button, aria-checked, Space toggles"
radio-group,inputs,"RadioGroup + card/segmented variants (element/radio-group)",RadioGroup,"fieldset of <input type=radio>, arrow-key roving focus"
combobox,inputs,"Combobox — searchable, multi, async (compound/combobox)","Combobox (Popover + Command)","input + filtered listbox popup, typeahead, option objects not raw values"
calendar,inputs,"Calendar (compound/calendar) — react-day-picker",Calendar,"month grid <table>, arrow-key day navigation"
select,inputs,"Select — closed listbox, one string value, no query field (element/select)",Select,"<select> or listbox popup, typeahead, one string value"
date-picker,inputs,DatePicker (compound/date-picker),Date Picker (Calendar + Popover),"<input type=date> or calendar popover, ISO value"
date-range-picker,inputs,"DateRangePicker — presets sidebar (compound/date-picker)",—,"two bound date inputs, partial selection reverts on close"
slider,inputs,Slider (element/slider),Slider,"<input type=range> with visible value readout"
rating,inputs,Rating (element/rating),—,"radio group of icon buttons, half-step optional"
toggle,inputs,"Toggle · ToggleGroup (element/toggle, compound/toggle-group)","Toggle, Toggle Group","aria-pressed buttons, single or multiple selection"
otp-input,inputs,InputOTP (compound/input-otp),Input OTP,"segmented one-char inputs, paste distributes across slots"
icon-picker,inputs,"IconPicker · Icon (compound/icon-picker)",—,"searchable icon grid in a popover, categorized"
file-upload,inputs,"FileUpload family — dropzone, list, item progress (compound/file-picker) · FilePreview (compound/file-preview)",—,"<input type=file> + drop zone, previews, size and count caps"
form-field,inputs,"Cell — label/content/helper/error slots (compound/cell)",Form + FormField (react-hook-form),"label + control + helper in one block, error slot below control"
form-validation,inputs,,Form (react-hook-form),"form element with submit-time validation and inline field errors"
rich-text-editor,inputs,,—,"@tiptap/react editor with toolbar and markdown shortcuts"
code-editor,inputs,,—,"@monaco-editor/react, mono, optional read-only diff mode"
modal-dialog,overlays,Dialog (compound/dialog),Dialog,"<dialog> or fixed layer, focus trap, ESC closes, header→body→footer"
confirm-dialog,overlays,"Dialog variant=danger — non-dismissible (compound/dialog)",Alert Dialog,"modal with explicit confirm/cancel, no outside-click dismiss"
side-panel,overlays,Sheet (block/sheet),Sheet,"fixed aside, focus-trapped, ESC closes, interruptible slide"
bottom-drawer,overlays,Sheet side=bottom (block/sheet),Drawer (vaul),"fixed bottom panel spanning full width"
command-palette,overlays,Command (compound/command),Command (cmdk),"filtered list in a dialog, ⌘K opens, arrow-key + Enter"
dropdown-menu,overlays,DropdownMenu (compound/dropdown-menu),Dropdown Menu,"role=menu under a trigger, arrow-key nav, outside click closes"
context-menu,overlays,ContextMenu (compound/context-menu),Context Menu,"right-click menu at pointer position"
speed-dial,overlays,SpeedDial (compound/speed-dial),—,"floating trigger button that fans a bounded set of icon actions out along one axis; the trigger doubles as the close affordance"
popover,overlays,Popover (element/popover),Popover,"anchored floating panel, dismiss on outside/ESC"
hover-card,overlays,HoverCard (element/popover),Hover Card,"preview panel on hover intent, delayed open/close"
tooltip,overlays,Tooltip (element/tooltip),Tooltip,"short hint on hover/focus, never load-bearing content"
data-table,collections,"Table + defineColumn (block/table)","<Table> + TanStack Table","semantic <table>, sticky header, tabular-nums, real pagination, status chips"
table-primitives,collections,UiTable* family (block/ui-table),Table,"bare styled <table>/<thead>/<tbody> parts"
list,collections,"List + ListToolbar + ListPagination (block/list)",—,"<ul> of rows with toolbar and pager"
record-header,collections,,—,"page-top block: breadcrumbs, title, status bar, actions"
page-header-stats,collections,"Heading (element/heading) · Stat (element/stat) — composed at the call site",—,"title row + KPI strip + back link"
gantt-timeline,collections,,—,"time-scaled task rows, date axis, horizontal scroll"
changes-feed,collections,ChangesList (block/changes-list),—,"grouped change-history feed, entity + operation labels"
message-thread,collections,"MessageScroller + useMessageScroller (block/message-scroller)",—,"scrolling feed pinned to bottom, jump-to-new button"
chat-bubble,collections,,—,"aligned bubble rows with reactions row"
attachment,collections,"FilePreview (compound/file-preview)",—,"file card: media, title, actions, error state, dashed idle border"
thread-marker,collections,"Marker — separator/border variants (element/marker)",—,"inline separator row with icon and label"
json-viewer,collections,,—,"react18-json-view collapsible tree, mono"
virtualized-list,collections,,—,"react-window fixed-row virtualization for 1k+ rows"
kanban-board,collections,,—,"flex columns of cards, @dnd-kit drag between columns, per-column count"
event-calendar,collections,,—,"month/week grid of events, today marker, overflow +N"
description-list,collections,,—,"<dl> two-column key/value grid, tabular values"
filter-toolbar,collections,,—,"row of faceted filter chips + clear-all + result count"
vertical-timeline,collections,,—,"ordered event list with time rail and node markers"
sidebar,navigation,"Sidebar family + Brand/Switcher/ItemGroup/UserMenu/Callout (block/sidebar)",Sidebar,"fixed <nav>: brand + icon sections + badges + user footer, collapsible to icons"
file-tree,navigation,FileTree (block/sidebar),—,"nested tree with disclosure carets, keyboard nav"
breadcrumb,navigation,Breadcrumb (compound/breadcrumb),Breadcrumb,"<nav aria-label=breadcrumb>, current page unlinked"
tabs,navigation,Tabs (compound/tabs),Tabs,"role=tablist, arrow-key switching, one panel per tab"
pagination,navigation,Pagination (compound/pagination),Pagination,"page buttons + prev/next, aria-current on active page"
navbar,navigation,,—,"horizontal top <nav> with links and actions"
navigation-menu,navigation,NavigationMenu (compound/navigation-menu),Navigation Menu,"top-level nav with flyout panels"
menubar,navigation,Menubar (compound/menubar),Menubar,"desktop-app menu strip with full keyboard model"
icon-rail,navigation,VerticalIconBar (block/vertical-icon-bar),—,"narrow vertical icon strip with tooltips"
stepper,navigation,,—,"ordered steps with done/current/todo states, aria-current=step"
alert,feedback,Alert (compound/alert),Alert,"role=alert block, tone via border + icon"
empty-state,feedback,EmptyState (compound/empty-state),Empty,"icon + heading + motivation line + primary action"
error-boundary,feedback,ErrorBoundary (lib/error-boundary),—,"React boundary rendering a retry block"
not-found,feedback,NotFound (compound/empty-state),—,"404 block with a way back"
skeleton,feedback,Skeleton (element/skeleton),Skeleton,"pulsing placeholder matching the final layout"
loader,feedback,Loader (element/loader),Spinner,"centered spinner with optional label"
text-spinner,feedback,,—,"animated unicode frames inline with text"
progress,feedback,Progress (element/progress),Progress,"role=progressbar with aria-valuenow"
toast,feedback,Toaster (compound/sonner),Sonner,"stacked corner notifications, auto-dismiss, action slot"
typing-indicator,feedback,"Loader — pulsing dots (element/loader)",—,"three-dot pulse row"
sparkline,charts,"Spark — line|bar|pie (element/spark)",—,"inline no-axis SVG mark, token or self-contained color"
status-timeline,charts,"StatusTimeline + .Skeleton (compound/status-timeline)",—,"one stacked bar per day of uptime status, hover card per day — no axis, not a bar chart"
inline-line,charts,"Spark — line (element/spark)",—,"compact line SVG with skeleton"
pie-donut,charts,"Chart — pie spec (block/chart)",—,"SVG arcs, max ~6 slices, center slot in doughnut"
segmented-progress,charts,"Chart — progress spec (block/chart)",—,"stacked horizontal segments with legend"
area-chart,charts,"Chart — area spec (block/chart)",Chart (recharts),"axes + gridlines + filled series + tooltip"
bar-chart,charts,"Chart — bar spec (block/chart)",Chart (recharts),"grouped/stacked bars, value labels opt-in"
line-chart,charts,"Chart — line spec (block/chart)",Chart (recharts),"multi-series lines, reference lines, brush"
scatter-chart,charts,"Chart — scatter spec (block/chart)",—,"x/y point field, hover ring, box select"
composed-chart,charts,"Chart — composed spec (block/chart)",—,"mixed marks over one shared scale pair"
histogram,charts,"Chart — bar spec with mode: histogram (block/chart)",—,"binned bars over a continuous axis"
bullet-chart,charts,"Bullet (gauge; also charts)",—,"measure bar + target tick + zone bands"
funnel,charts,"Chart — funnel spec (block/chart)",—,"ordered stage bands, percent-of-previous labels"
gauge,charts,"Chart — gauge spec (block/chart)",—,"value arc with threshold zones and center readout"
contribution-heatmap,charts,"Chart — heatmap-calendar spec (block/chart)",—,"calendar cell grid with level legend"
matrix-heatmap,charts,"Chart — heatmap-matrix spec (block/chart)",—,"x-by-y cell matrix on the tokenized ramp"
radar,charts,"Chart — radar spec (block/chart)",—,"spider axes with series polygons"
ring,charts,"Chart — ring spec (block/chart)",—,"segmented circular progress with center info"
chart-chrome,charts,"Chart chrome — legend, tooltip and empty state set by the spec theme · ChartErrorCard (block/chart)",—,"shared empty/tooltip/legend chrome for inline charts"
card,layout,Card family (block/card),Card,"bordered section: header, content, footer"
stat-card,layout,"Stat (element/stat) · Chart — stat spec (block/chart)",—,"number + comparison + trend + state + door, composable regions"
accordion,layout,Accordion (compound/accordion),Accordion,"stacked disclosure sections, single or multiple open"
collapsible-panel,layout,SidePanel (block/side-panel),—,"in-flow side region docked left or right that collapses to a rail instead of disappearing; siblings reflow, nothing overlays"
collapsible,layout,"Collapsible (element/collapsible) · CollapsiblePanel (compound/accordion)",Collapsible,"button-controlled region with hidden state"
split-panes,layout,ResizablePanelGroup (block/resizable),Resizable,"draggable divider panes, keyboard resize"
scroll-area,layout,ScrollArea (element/scroll-area),Scroll Area,"styled overflow container, visible-on-hover scrollbar"
separator,layout,"Separator (element/separator) · SeparatorWithText (element/separator)",Separator,"<hr>/role=separator, optional centered label"
aspect-ratio,layout,AspectRatio (element/aspect-ratio),Aspect Ratio,"CSS aspect-ratio box"
carousel,layout,Carousel (compound/carousel),Carousel,"scroll-snap track with prev/next controls"
bento-grid,layout,,—,"asymmetric feature grid with spanning cells"
editable-card,layout,,—,"card with edit-in-place body and commit footer"
drag-reorder,layout,Sortable family (compound/sortable),—,"dnd-kit list reorder, keyboard sortable, drag overlay ghost"
text,typography,,Typography,"semantic p/span with size and weight scale"
badge,typography,"Chip (element/chip)",Badge,"small status pill, tokenized tone"
chip,typography,"Chip (element/chip) · Option display (element/select)",—,"removable tag, optional color dot"
code,typography,Code (element/code),—,"inline <code>, mono"
kbd,typography,Kbd (element/kbd),Kbd,"<kbd> keycap"
label,typography,Label (element/label),Label,"<label for> bound to a control"
link,typography,Link (element/link),—,"<a> with underline discipline"
secure-text,typography,"SecureText · maskText (element/secure-text)",—,"masked value with reveal toggle, mono"
markdown,typography,Markdown (element/markdown),—,"react-markdown rendering with typographic defaults"
avatar,media,Avatar (element/avatar),Avatar,"image with initials fallback, round"
copy-button,media,CopyButton (compound/copy-button),—,"clipboard write with copied-state swap"
icon,media,"Icon · IconPicker (compound/icon-picker) + iconsData (lib/icons-data)",—,"lucide icon by name, consistent stroke and size grid"
voice-waveform,chat,"MicInput (compound/mic-input)",—,"latched dictation button plus mic level bars; button={false} for the meter alone, recorder={…} for record-then-review"
brand-logo,media,"Logo — blue-black|white-white|lime-white|blue-white (element/logo)",—,"inline SVG logo sized by height"
shine-border,media,ShineBorder (effect/shine-border),—,"animated gradient border wrapper, decorative"
theme-toggle,media,"ThemeToggle (effect/theme-toggle)",—,"light/dark switch toggling the .dark class on the root element"
view-switcher,media,ViewSwitcher (compound/tabs),—,"segmented control switching view-type projections"
animated-number,motion,"AnimatedNumber (element/animated-number) · SlidingNumber (element/animated-number)",—,"tick-up numerals, renders plain text until JS ready"
stagger-entrance,motion,"AnimatedList (effect/animated-list)",—,"staggered child arrival, identity moments only, never on 100×/day actions"
text-effects,motion,"TextEffect · TextMorph · TextScramble · TextShimmer (effect/*)",—,"per-character text animation, low-frequency surfaces only"
morphing-overlay,motion,"MorphingDialog · MorphingPopover (effect/*)",—,"trigger morphs into overlay, interruptible"
panel-transitions,motion,"TransitionPanel (effect/transition-panel) · Accordion (compound/accordion) · Tabs (compound/tabs)",—,"crossfade/slide between sibling panels, height-animated reveal, interruptible"
decorative-effects,motion,"Spotlight · GlowEffect · AnimatedBackground · InfiniteSlider · Highlight (effect/*, effect/*)",—,"pointer-tracked washes and loops, decorative only, never on data"
dynamic-toolbar,motion,,—,"toolbar expanding to contextual actions"
utility-hooks,hooks,"useClickOutside · useFileUpload · useMediaQuery · useIsMobile (lib/*)",—,"outside-click, file-upload state, matchMedia boolean, <768px boolean"
class-merge,utils,cn (lib/utils),cn,"clsx + tailwind-merge"
formatting-utils,utils,"formatDate (lib/format) · generateId (lib/id) · formatRelativeTime (lib/time)",—,"Intl date formatting, nanoid ids, relative-time strings"
composition-utils,utils,"getStrictContext (lib/get-strict-context) · composeRefs (lib/compose-refs)",—,"throwing Provider/hook pair, ref composition"
```