Component Ontology

Primary action trigger. 5 variants, 3 sizes, asChild.

Single-line text input with label and error state.

Multi-line text input, resizable.

Accessible form label. Pairs with any input.

Binary toggle for multi-select patterns.

Single-select option group.

Dropdown selection with keyboard nav and type-ahead.

Binary toggle for settings.

Range input for numeric values and filters.

Pressable on/off button. Used in Toggle Group.

Exclusive or multi-select button group (grid/list view toggle).

Searchable select. Customer lookup, item search.

Date selection with calendar popover.

Month calendar grid. Used in Date Picker. (react-day-picker)

One-time password input with segmented fields.

Form wrapper with react-hook-form + zod validation context.

Container with Header, Title, Description, Content, Footer.

Horizontal or vertical divider.

Tabbed navigation with content panels.

Expandable section. Used in Sidebar and Accordion.

Vertically stacked expandable sections.

Custom scrollbar container for constrained panels.

Split-pane resizable panels. (react-resizable-panels)

App shell sidebar with collapsible groups and navigation.

Fixed aspect ratio container. Skip: CSS aspect-ratio sufficient.

Modal overlay for confirmations, forms, detail views.

Floating panel for inline editing and filters.

Hover context for dense UIs.

Action menu with keyboard nav, shortcuts, submenus.

Right-click context menu. Shares API with Dropdown Menu.

Slide-over panel (drawer) from edge. Detail views, side editing.

Blocking confirmation dialog. Unlike Dialog, requires explicit action.

Rich preview on hover. Entity previews in tables.

Command palette (cmdk). Power-user navigation.

App-level menu bar. Skip: not a web ERP pattern.

Inline status indicator. 6 semantic variants.

Composable data table (Header, Body, Row, Head, Cell).

Metric display: value, label, delta. Dashboard staple.

Loading placeholder. Skeleton + SkeletonText variants.

Full-featured data table: sorting, filtering, pagination, row selection, bulk actions. (TanStack Table)

User/team identity indicator with fallback initials.

Chart wrapper with Geist-themed Recharts. Bar, line, area, pie.

Zero-state for tables, lists, dashboards. Icon, heading, description, action.

Hierarchical navigation trail.

Page navigation for tables and lists.

Skip: marketing/content-site pattern, not ERP.

Inline banner for warnings, errors, info. Not dismissible.

Ephemeral notification. Uses Sonner under the hood.

Determinate progress bar. Sync jobs, imports.

Inline loading spinner. Simpler than Skeleton.

Keyboard shortcut display. Used in menus and tooltips.