Skip to main content

@elabs-ai/components-ui

125 pages

Foundation + app UI (Button, Card, Dialog, Tabs, AppShell, …).

pnpm add @elabs-ai/components-ui

Highlights9

A few of the 125 pages here. Open a family below, or in the navigation, to see all of it.

SchemaForm

Convenience composition: Provider → Root(form) → title/description → Fields → Error → Submit.

17 examples
DateRangePicker

Date range picker (Popover + Calendar in range mode).

5 examples
Tree

A hierarchical list with expand and collapse, single or multiple selection and full keyboard navigation.

14 examples
ChangeReview

The ACCEPT/REJECT diff surface; read-only patch lines are AI/DiffView and an editable side-by-side is Editor/DiffEditor — see [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs).

13 examples
Command

A grouped, searchable, keyboard-driven list (cmdk).

6 examples
MetricCard

Single KPI tile — label, value, delta/trend.

16 examples
ViewToolbar

The row above a list, table or board — status and filters on the left, actions on the right, every control its own tab stop.

9 examples
StatePanel

Unified state panel covering empty, error, and loading states.

9 examples
ModelPicker

The INLINE composer pill; a full palette in a dialog is a CommandDialog you compose yourself — see [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs).

9 examples

Browse by family10

  • Core17 pages

    AttributionPanel · Badge · Button · Card · IconButton · Input · LinkPreviewCard · MetricCard · ModelPicker · Reveal · StatusBadge · Tabs · Textarea · ThemeFamilySwitch · ThemeSwitcher · Timeline · WorkspacePicker

  • Data3 pages

    ChangeReview · RevisionTimeline · Table

  • Disclosure3 pages

    Accordion · Collapsible · KeyboardShortcuts

  • Display23 pages

    AmbientField · AspectRatio · Audio · Avatar · CommandChip · CopyableValue · Image · InstallTabs · IntegrationMatrix · Kbd · MatchHighlight · Media · MediaPlayer · Meter · ParallaxPlane · Progress · RevealOnEnter · ScrollArea · Separator · SpecPlayground · Spinner · TokenSpotlight · Video

  • Forms34 pages

    AdvancedGroup · BoundedNumber · ButtonGroup · Calendar · Checkbox · ColorPicker · Combobox · DatePicker · DateRangePicker · Field · FieldRow · FileUpload · Form · InputGroup · InputOTP · KeyValueEditor · Label · ListEditor · MentionInput · NumberInput · RadioGroup · Rating · SchemaForm · SegmentedField · Select · Slider · SliderNumber · Switch · TagInput · Toggle · ToggleGroup · Transfer · TreeSelect · VirtualSelect

  • Foundations5 pages

    Decoration · DraftingMarks · Localization · Motion · Typography

  • Layout11 pages

    AppSidebar · BentoGrid · ContextRail · Descriptions · Resizable · SectionHeader · SideDock · SplitPanel · SurfaceTour · Toolbar · ViewToolbar

  • Navigation9 pages

    Breadcrumb · CommandTrigger · Menubar · NavigationMenu · NavNotifications · Pagination · SkipLink · Tree · Wizard

  • Overlays12 pages

    AlertDialog · Command · ConfirmDialog · ContextMenu · Dialog · Drawer · DropdownMenu · ExpandDialog · HoverCard · Popover · Sheet · Tooltip

  • States8 pages

    Alert · EmptyState · ErrorState · Illustrations · LoadingState · Skeleton · StatePanel · Toast