Simurgh provides 67 primitives. Every component has Angular, React, and Vue implementations with a
shared accessibility contract and framework-native APIs: inputs and outputs in Angular, props and
callbacks in React, and props, events, and slots in Vue.
68 components
D Dialog Overlays StyledCustomComplex keysReact · Vue · Angular Compare alternatives → A Alert Dialog Overlays StyledCustomComplex keysReact · Vue · Angular Compare alternatives → S Sheet Overlays StyledCustomComplex keysReact · Vue · Angular Compare alternatives → D Drawer Overlays StyledCustomComplex keysReact · Vue · Angular Compare alternatives → P Popover Overlays StyledCustomModerate keysReact · Vue · Angular Compare alternatives → T Tooltip Overlays StyledCustomModerate keysReact · Vue · Angular Compare alternatives → H Hover Card Overlays StyledCustomModerate keysReact · Vue · Angular Compare alternatives → D Dropdown Menu Overlays StyledCustomComplex keysReact · Vue · Angular C Context Menu Overlays StyledCustomComplex keysReact · Vue · Angular S Select Forms StyledCustomComplex keysReact · Vue · Angular Compare alternatives → N Native Select Forms NativeNativeSimple keysReact · Vue · Angular Compare alternatives → C Combobox Forms StyledCustomComplex keysReact · Vue · Angular Compare alternatives → C Command Navigation StyledCustomComplex keysReact · Vue · Angular C Calendar Forms StyledCustomComplex keysReact · Vue · Angular D Date Picker Forms StyledCustomComplex keysReact · Vue · Angular C Carousel Navigation StyledCustomComplex keysReact · Vue · Angular R Resizable Layout StyledCustomComplex keysReact · Vue · Angular S Sidebar Navigation StyledCustomModerate keysReact · Vue · Angular T Tree Navigation StyledCustomComplex keysReact · Vue · Angular F File Upload Forms StyledCustomSimple keysReact · Vue · Angular P Password Input Forms StyledCustomSimple keysReact · Vue · Angular N Number Input Forms StyledCustomSimple keysReact · Vue · Angular R Rating Actions StyledCustomModerate keysReact · Vue · Angular T Tags Input Forms StyledCustomModerate keysReact · Vue · Angular T Tabs Navigation HeadlessCustomModerate keysReact · Vue · Angular A Accordion Navigation HeadlessCustomModerate keysReact · Vue · Angular Compare alternatives → C Checkbox Forms NativeNativeSimple keysReact · Vue · Angular L Label Forms NativeNativeSimple keysReact · Vue · Angular S Separator Layout HeadlessCustomSimple keysReact · Vue · Angular P Progress Feedback NativeNativeSimple keysReact · Vue · Angular C Chart Other StyledCustomSimple keysReact · Vue · Angular T Toggle Actions HeadlessCustomSimple keysReact · Vue · Angular V Visually Hidden Feedback HeadlessCustomSimple keysReact · Vue · Angular A Avatar Feedback HeadlessCustomSimple keysReact · Vue · Angular A Alert Feedback HeadlessCustomSimple keysReact · Vue · Angular A Aspect Ratio Layout HeadlessCustomSimple keysReact · Vue · Angular S Skeleton Feedback HeadlessCustomSimple keysReact · Vue · Angular S Spinner Feedback HeadlessCustomSimple keysReact · Vue · Angular B Button Actions NativeNativeSimple keysReact · Vue · Angular B Button Group Actions StyledCustomSimple keysReact · Vue · Angular L Link Navigation NativeNativeSimple keysReact · Vue · Angular I Input Forms NativeNativeSimple keysReact · Vue · Angular I Input Group Forms StyledCustomSimple keysReact · Vue · Angular I Input OTP Forms StyledCustomSimple keysReact · Vue · Angular S Slider Forms NativeNativeSimple keysReact · Vue · Angular M Meter Feedback NativeNativeSimple keysReact · Vue · Angular T Toolbar Actions StyledCustomModerate keysReact · Vue · Angular T Toggle Group Actions StyledCustomModerate keysReact · Vue · Angular S Scroll Area Layout StructuralCustomSimple keysReact · Vue · Angular T Textarea Forms NativeNativeSimple keysReact · Vue · Angular B Badge Feedback HeadlessCustomSimple keysReact · Vue · Angular B Breadcrumb Navigation HeadlessCustomSimple keysReact · Vue · Angular N Navigation Menu Navigation StyledCustomSimple keysReact · Vue · Angular M Menubar Navigation StyledCustomComplex keysReact · Vue · Angular C Card Layout StructuralCustomSimple keysReact · Vue · Angular E Empty Feedback StyledCustomSimple keysReact · Vue · Angular I Item Layout StructuralCustomSimple keysReact · Vue · Angular K Kbd Feedback StyledCustomSimple keysReact · Vue · Angular F Field Forms StructuralCustomSimple keysReact · Vue · Angular F Form Forms StructuralCustomSimple keysReact · Vue · Angular T Table Feedback NativeNativeSimple keysReact · Vue · Angular P Pagination Navigation StyledCustomSimple keysReact · Vue · Angular C Collapsible Navigation HeadlessCustomSimple keysReact · Vue · Angular Compare alternatives → D Disclosure Navigation NativeNativeSimple keysReact · Vue · Angular Compare alternatives → D Description List Other StructuralCustomSimple keysReact · Vue · Angular S Switch Forms NativeNativeSimple keysReact · Vue · Angular R Radio Group Forms HeadlessCustomModerate keysReact · Vue · Angular T Toast Overlays StyledCustomSimple keysReact · Vue · Angular No components match these filters.
| Component | Choose it for |
|---|
| Button | A native action or form submission control. |
| Button Group | Visually composing related buttons. |
| Toggle | One independently pressed/unpressed option. |
| Toggle Group | One or more pressed options in a related set. |
| Toolbar | A keyboard-navigable collection of controls. |
| Rating | Selecting or displaying a bounded rating. |
| Component | Choose it for |
|---|
| Form | Coordinating native validation and invalid-field focus. |
| Field | Grouping a label, control, description, and validation message. |
| Label | Giving a native form control an accessible name. |
| Input | Single-line native text entry. |
| Textarea | Multiline native text entry. |
| Input Group | Adding a visual prefix, suffix, or action to an input. |
| Password Input | Password entry with an accessible reveal control. |
| Number Input | Numeric entry with bounded increment/decrement controls. |
| Input OTP | Autofill-ready one-time-code entry. |
| Checkbox | Independent boolean or mixed-state selection. |
| Switch | An immediately applied on/off setting. |
| Radio Group | One required choice from a visible set. |
| Native Select | Platform-native selection from a fixed list. |
| Select | A custom-styled fixed-option listbox. |
| Combobox | Editable search and selection from filtered options. |
| Slider | Pointer and keyboard selection within a numeric range. |
| Tags Input | Creating and removing multiple short text values. |
| File Upload | Native file selection with drop-zone feedback. |
| Calendar | Selecting or navigating dates in a visible grid. |
| Date Picker | Date entry through a dismissible calendar popup. |
| Component | Choose it for |
|---|
| Dialog | A modal task that contains focus until dismissed. |
| Alert Dialog | An interruptive confirmation requiring an explicit choice. |
| Sheet | A side-anchored modal task or detail surface. |
| Drawer | A bottom-anchored modal surface, often on smaller screens. |
| Popover | Interactive, dismissible content anchored to a trigger. |
| Tooltip | A short, non-interactive description on hover or focus. |
| Hover Card | Supplementary preview content on hover or focus. |
| Dropdown Menu | A trigger-opened list of actions. |
| Context Menu | Actions for a specific target or pointer location. |
| Toast | Brief, non-blocking status feedback. |
| Component | Choose it for |
|---|
| Disclosure | One native summary/details disclosure. |
| Collapsible | Programmatically controlled show/hide content. |
| Accordion | A coordinated set of disclosure sections. |
| Tabs | Switching between peer panels in the same context. |
| Breadcrumb | Showing location within a page hierarchy. |
| Pagination | Navigating pages of a larger result set. |
| Link | Navigation to a URL with native link behavior. |
| Navigation Menu | Site or application navigation with expandable groups. |
| Menubar | Desktop-style application command menus. |
| Sidebar | Complementary application navigation with disclosure. |
| Tree | Navigating a hierarchical, expandable item structure. |
| Carousel | Sequential navigation through labelled slides. |
| Command | Searching and invoking a collection of actions. |
| Component | Choose it for |
|---|
| Card | Composing a bounded content summary or action area. |
| Item | Building consistently structured list rows. |
| Separator | A semantic or decorative content division. |
| Aspect Ratio | Reserving a stable media proportion. |
| Scroll Area | A bounded region with native scrolling behavior. |
| Resizable | Keyboard- and pointer-adjustable adjacent panels. |
| Component | Choose it for |
|---|
| Table | Semantic row-and-column data. |
| Avatar | An image identity with deterministic text fallback. |
| Badge | Compact metadata or status. |
| Kbd | A keyboard key or shortcut hint. |
| Alert | Persistent polite or assertive feedback. |
| Empty | A zero-state explanation and next action. |
| Progress | Determinate or indeterminate task completion. |
| Meter | A scalar measurement within a known range. |
| Skeleton | A loading placeholder that preserves layout. |
| Spinner | Compact indeterminate busy feedback. |
| Visually Hidden | Screen-reader text without visible layout. |
- Choose Native Select for the smallest, most familiar fixed-option control; Select when a
custom listbox presentation is required; and Combobox when users need to type or filter.
- Choose Tooltip for a short non-interactive description, Hover Card for a richer preview,
and Popover for interactive content that must remain open while used.
- Choose Dialog for a general modal task and Alert Dialog only for an interruptive decision.
Sheet and Drawer use the same modal model with side- or bottom-anchored presentation.
- Choose Disclosure for one native details section, Collapsible for controlled visibility,
and Accordion for a coordinated set of sections.
Last verified on 2026-08-13 against Simurgh registry 0.1.1.
