--- url: https://brand.okrado.com/catalog/ title: Components description: Every component of @okrado/ui, generated from its manifest, with its lifecycle stage and a link to its docs in Storybook. kind: reference owner: hmdmsd updated: 2026-11-03 review_by: 2027-02-28 audience: - designer - developer - agent --- # Components > Every component of @okrado/ui, generated from its manifest, with its lifecycle stage and a link to its docs in Storybook. This index is generated from the `@okrado/ui` 0.11.0 manifest: 110 entries, 59 stable and 51 beta. Each name opens the component’s docs page in [Storybook](https://brand.okrado.com/components/), where you can try every story in paper and night, at 375 px and in Arabic. A component is `stable` only when it has a docs page, a green generated story matrix, an axe check at zero and a review score. `beta` components work but their API may still change. See [Governance](https://brand.okrado.com/contribute/governance/). Agents can read the same data as JSON at `/components/manifests/components.json`. ## Primitives | Name | Stage | What it is | | -------------------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | | [AlertDialog](https://brand.okrado.com/components/?path=/docs/primitives-alertdialog--docs) | beta | A modal that interrupts for a decision the user cannot take back. | | [AlertDialogClose](https://brand.okrado.com/components/?path=/docs/primitives-alertdialog--docs) | beta | A control that closes its AlertDialog without acting. | | [AlertDialogContent](https://brand.okrado.com/components/?path=/docs/primitives-alertdialog--docs) | beta | The alert dialog panel. | | [AlertDialogTrigger](https://brand.okrado.com/components/?path=/docs/primitives-alertdialog--docs) | beta | The element that opens its AlertDialog. | | [Badge](https://brand.okrado.com/components/?path=/docs/primitives-badge--docs) | stable | A status chip. | | [Button](https://brand.okrado.com/components/?path=/docs/primitives-button--docs) | stable | The one button. | | [ButtonLink](https://brand.okrado.com/components/?path=/docs/primitives-button--docs) | stable | A link that looks like a Button, for an action that navigates ("Talk to the founders" opening mail, "See how it works"). | | [Checkbox](https://brand.okrado.com/components/?path=/docs/primitives-checkbox--docs) | stable | A checkbox with its label on the same row. | | [Dialog](https://brand.okrado.com/components/?path=/docs/primitives-dialog--docs) | beta | A modal dialog. | | [DialogClose](https://brand.okrado.com/components/?path=/docs/primitives-dialog--docs) | stable | A control that closes its Dialog, such as a Cancel button. | | [DialogContent](https://brand.okrado.com/components/?path=/docs/primitives-dialog--docs) | stable | The dialog panel. | | [DialogTrigger](https://brand.okrado.com/components/?path=/docs/primitives-dialog--docs) | stable | The element that opens its Dialog. | | [Display](https://brand.okrado.com/components/?path=/docs/primitives-display--docs) | stable | The one display headline of a marketing page. | | [Drawer](https://brand.okrado.com/components/?path=/docs/primitives-drawer--docs) | beta | A panel that slides in from the edge. | | [DrawerClose](https://brand.okrado.com/components/?path=/docs/primitives-drawer--docs) | beta | A control that closes its Drawer, such as a Cancel button. | | [DrawerContent](https://brand.okrado.com/components/?path=/docs/primitives-drawer--docs) | beta | The drawer panel. | | [DrawerTrigger](https://brand.okrado.com/components/?path=/docs/primitives-drawer--docs) | beta | The element that opens its Drawer. | | [Heading](https://brand.okrado.com/components/?path=/docs/primitives-heading--docs) | stable | A marketing or docs heading on the fluid scale. | | [Icon](https://brand.okrado.com/components/?path=/docs/primitives-icon--docs) | beta | A Lucide icon by name from the Okrado allow-list, in one of the three standard sizes and drawn in `currentColor`. | | [IconButton](https://brand.okrado.com/components/?path=/docs/primitives-iconbutton--docs) | beta | A square button that shows only an icon, as wide as the control height. | | [Input](https://brand.okrado.com/components/?path=/docs/primitives-input--docs) | stable | A single-line text input. | | [Kbd](https://brand.okrado.com/components/?path=/docs/primitives-kbd--docs) | stable | A keyboard key or shortcut, such as ⌘K. | | [Link](https://brand.okrado.com/components/?path=/docs/primitives-link--docs) | stable | A text link inside the current zone, in the link colour with the focus-gap ring. | | [LiveRegion](https://brand.okrado.com/components/?path=/docs/primitives-liveregion--docs) | beta | A live region. | | [Menu](https://brand.okrado.com/components/?path=/docs/primitives-menu--docs) | stable | A menu of actions or links behind a trigger. | | [MenuCheckboxItem](https://brand.okrado.com/components/?path=/docs/primitives-menu--docs) | beta | A menu item that toggles an option on or off and keeps the menu open, such as a visible column. | | [MenuContent](https://brand.okrado.com/components/?path=/docs/primitives-menu--docs) | stable | The floating menu panel, positioned next to its trigger. | | [MenuGroup](https://brand.okrado.com/components/?path=/docs/primitives-menu--docs) | beta | A labelled group of related items in a Menu, such as the options of one filter. | | [MenuItem](https://brand.okrado.com/components/?path=/docs/primitives-menu--docs) | stable | One action in a Menu. | | [MenuLinkItem](https://brand.okrado.com/components/?path=/docs/primitives-menu--docs) | stable | A menu entry that is a link (`href`), for navigation menus such as the ProductSwitcher. | | [MenuRadioGroup](https://brand.okrado.com/components/?path=/docs/primitives-menu--docs) | beta | A set of mutually exclusive MenuRadioItems, such as the density. | | [MenuRadioItem](https://brand.okrado.com/components/?path=/docs/primitives-menu--docs) | beta | One choice in a MenuRadioGroup. | | [MenuSeparator](https://brand.okrado.com/components/?path=/docs/primitives-menu--docs) | stable | A rule between groups of menu items. | | [MenuTrigger](https://brand.okrado.com/components/?path=/docs/primitives-menu--docs) | stable | The control that opens its Menu. | | [Meter](https://brand.okrado.com/components/?path=/docs/primitives-meter--docs) | stable | A scalar measurement within a known range, such as a key result's progress toward its target. | | [Mono](https://brand.okrado.com/components/?path=/docs/primitives-mono--docs) | stable | Evidence in JetBrains Mono. | | [Popover](https://brand.okrado.com/components/?path=/docs/primitives-popover--docs) | beta | A small panel tied to a trigger. | | [PopoverClose](https://brand.okrado.com/components/?path=/docs/primitives-popover--docs) | beta | A control that closes its Popover, such as a Done button. | | [PopoverContent](https://brand.okrado.com/components/?path=/docs/primitives-popover--docs) | beta | The floating panel, positioned next to its trigger with collision flip and shift, at the popover layer, with an e2 shadow and a 1 px line border. | | [PopoverTrigger](https://brand.okrado.com/components/?path=/docs/primitives-popover--docs) | beta | The control that opens its Popover. | | [Progress](https://brand.okrado.com/components/?path=/docs/primitives-progress--docs) | beta | Progress of a long job (ADR-0113). | | [RecordMark](https://brand.okrado.com/components/?path=/docs/primitives-recordmark--docs) | stable | The Record mark (ADR-0076 §14), the only way to put the Okrado logo on a page. | | [Select](https://brand.okrado.com/components/?path=/docs/primitives-select--docs) | stable | A single-choice dropdown for 4 to about 15 options (fewer. | | [Skeleton](https://brand.okrado.com/components/?path=/docs/primitives-skeleton--docs) | stable | A placeholder block while content loads. | | [Switch](https://brand.okrado.com/components/?path=/docs/primitives-switch--docs) | stable | An on/off switch for a setting that applies at once (use Checkbox inside forms that submit). | | [Tab](https://brand.okrado.com/components/?path=/docs/primitives-tabs--docs) | stable | One tab. | | [Tabs](https://brand.okrado.com/components/?path=/docs/primitives-tabs--docs) | stable | Tabs that switch between panels of one view, such as the long, shorts and feed variants of a video. | | [TabsList](https://brand.okrado.com/components/?path=/docs/primitives-tabs--docs) | stable | The row of Tab buttons. | | [TabsPanel](https://brand.okrado.com/components/?path=/docs/primitives-tabs--docs) | stable | The content shown while its Tab is active. | | [Text](https://brand.okrado.com/components/?path=/docs/primitives-text--docs) | stable | Running text on marketing and docs surfaces in Inter, on the language's body scale. | | [Textarea](https://brand.okrado.com/components/?path=/docs/primitives-textarea--docs) | stable | A multi-line text input. | | [ToastProvider](https://brand.okrado.com/components/?path=/docs/primitives-toastprovider--docs) | beta | Hosts toasts for everything inside it and renders them at the bottom-end of the viewport, at the toast layer. | | [Toggletip](https://brand.okrado.com/components/?path=/docs/primitives-toggletip--docs) | beta | Help that opens on press and is read aloud, for what a Tooltip cannot carry. | | [Tooltip](https://brand.okrado.com/components/?path=/docs/primitives-tooltip--docs) | beta | A short hint on hover and keyboard focus, such as the shortcut of an IconButton. | | [TooltipProvider](https://brand.okrado.com/components/?path=/docs/primitives-tooltip--docs) | beta | The delay group of every Tooltip below it. | | [UiProvider](https://brand.okrado.com/components/?path=/docs/foundations-uiprovider--docs) | stable | Gives every @okrado/ui component its locale, text direction and shared strings. | | [VisuallyHidden](https://brand.okrado.com/components/?path=/docs/primitives-visuallyhidden--docs) | stable | Text for assistive technology only, such as the name of an icon-only region. | ## Components | Name | Stage | What it is | | ------------------------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------- | | [Banner](https://brand.okrado.com/components/?path=/docs/components-banner--docs) | beta | A persistent, page-wide message at the top of the content. | | [BrandHead](https://brand.okrado.com/components/?path=/docs/components-brandhead--docs) | beta | The brand's `` tags for a plain React tree (React 19 hoists them into ``). | | [Breadcrumbs](https://brand.okrado.com/components/?path=/docs/components-breadcrumbs--docs) | beta | The location trail of a page (ADR-0083). | | [BulkBar](https://brand.okrado.com/components/?path=/docs/components-toolbar--docs) | beta | The bar that takes the place of the Toolbar while rows are selected (ADR-0083). | | [Card](https://brand.okrado.com/components/?path=/docs/components-card--docs) | stable | A surface that groups related content, with the card inset of the current density. | | [ConfirmDialog](https://brand.okrado.com/components/?path=/docs/components-confirmdialog--docs) | beta | A destructive confirmation. | | [CtaCard](https://brand.okrado.com/components/?path=/docs/components-ctacard--docs) | stable | The closing call to action of a page (ADR-0076 §6). | | [DataTable](https://brand.okrado.com/components/?path=/docs/components-datatable--docs) | beta | The list of records, the one table of the suite (ADR-0083, ADR-0078). | | [DecisionPanel](https://brand.okrado.com/components/?path=/docs/components-decisionpanel--docs) | beta | The governance moment (ADR-0076 §4, §10). | | [EmptyState](https://brand.okrado.com/components/?path=/docs/components-emptystate--docs) | stable | The state of a list or a module with nothing to show, or whose data could not be loaded. | | [Field](https://brand.okrado.com/components/?path=/docs/components-field--docs) | stable | A form field. | | [FilterBar](https://brand.okrado.com/components/?path=/docs/components-toolbar--docs) | beta | The search, filters and result count of a list, for the Toolbar (ADR-0083). | | [Form](https://brand.okrado.com/components/?path=/docs/components-form--docs) | beta | A form with explicit save (ADR-0112). | | [FormActions](https://brand.okrado.com/components/?path=/docs/components-form--docs) | beta | The one Save button of a Form, kept enabled (a disabled save hides why it cannot save) with a Cancel to its right. | | [FormField](https://brand.okrado.com/components/?path=/docs/components-form--docs) | beta | One field of a Form. | | [InlineNotice](https://brand.okrado.com/components/?path=/docs/components-inlinenotice--docs) | beta | A message tied to a place. | | [KeyResultProgress](https://brand.okrado.com/components/?path=/docs/components-keyresultprogress--docs) | stable | A key result with its progress (ADR-0030). | | [KpiTile](https://brand.okrado.com/components/?path=/docs/components-kpitile--docs) | stable | A KPI on a dashboard or the app's Home (ADR-0076 §11). | | [KrRow](https://brand.okrado.com/components/?path=/docs/components-krrow--docs) | stable | One key result as a table row (ADR-0076 §10, §11). | | [LedgerChain](https://brand.okrado.com/components/?path=/docs/components-ledgerchain--docs) | stable | A chain of ledger records (ADR-0076 §6). | | [LedgerRow](https://brand.okrado.com/components/?path=/docs/components-ledgerrow--docs) | stable | One ledger record (ADR-0076 §10). | | [LoopDiagram](https://brand.okrado.com/components/?path=/docs/components-loopdiagram--docs) | stable | The Loop (ADR-0076 §6). | | [PageContent](https://brand.okrado.com/components/?path=/docs/components-pagecontent--docs) | beta | The content column of a page inside the shell. | | [PageHeader](https://brand.okrado.com/components/?path=/docs/components-pageheader--docs) | beta | The top of every page (ADR-0083). | | [Pagination](https://brand.okrado.com/components/?path=/docs/components-toolbar--docs) | beta | The footer of a list. | | [PreferencesForm](https://brand.okrado.com/components/?path=/docs/components-preferencesform--docs) | stable | The user's display preferences (ADR-0060, ADR-0065). | | [ProductFrame](https://brand.okrado.com/components/?path=/docs/components-productframe--docs) | stable | A product shot on a marketing or docs page (ADR-0076 §8). | | [Prose](https://brand.okrado.com/components/?path=/docs/components-prose--docs) | stable | Long-form Markdown, such as a decision record's body, in the design system's type scale. | | [RecordHeader](https://brand.okrado.com/components/?path=/docs/components-recordheader--docs) | stable | The head of a record view (ADR-0069). | | [RecordList](https://brand.okrado.com/components/?path=/docs/components-recordlist--docs) | stable | The list half of the viewer pattern (ADR-0069). | | [RecordListHead](https://brand.okrado.com/components/?path=/docs/components-recordlisthead--docs) | stable | The header row of a {@link RecordList}. | | [RecordStatus](https://brand.okrado.com/components/?path=/docs/components-recordstatus--docs) | stable | The status of a decision, note, key result or video as a labelled badge, with one tone per status across the suite. | | [Section](https://brand.okrado.com/components/?path=/docs/components-section--docs) | stable | A titled region of a page (ADR-0069 page frame). | | [SectionHead](https://brand.okrado.com/components/?path=/docs/components-sectionhead--docs) | stable | The head of a marketing or docs section (ADR-0076 §2). | | [ShortcutsDialog](https://brand.okrado.com/components/?path=/docs/components-shortcutsdialog--docs) | beta | The `?` dialog. | | [SiteFooter](https://brand.okrado.com/components/?path=/docs/components-sitefooter--docs) | stable | The footer of an Okrado site (ADR-0076 §2, R §3). | | [SiteHeader](https://brand.okrado.com/components/?path=/docs/components-siteheader--docs) | stable | The header of an Okrado site (ADR-0076 §2). | | [Steps](https://brand.okrado.com/components/?path=/docs/components-steps--docs) | stable | Steps on a chained rule (ADR-0076 §6). | | [Toolbar](https://brand.okrado.com/components/?path=/docs/components-toolbar--docs) | beta | The row of controls above a DataTable (ADR-0083). | | [VerifyBlock](https://brand.okrado.com/components/?path=/docs/components-verifyblock--docs) | stable | The proof under a ledger (ADR-0076 §6). | | [VideoCard](https://brand.okrado.com/components/?path=/docs/components-videocard--docs) | stable | A Studio video in a grid (ADR-0069 library). | | [ViewOptions](https://brand.okrado.com/components/?path=/docs/components-toolbar--docs) | beta | The "View" menu of a list (ADR-0083). | ## Shells | Name | Stage | What it is | | ---------------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------ | | [AppShell](https://brand.okrado.com/components/?path=/docs/shell-appshell--docs) | beta | The suite's frame, the same in every zone (ADR-0058, ADR-0069, ADR-0083). | | [BottomBar](https://brand.okrado.com/components/?path=/docs/shell-bottombar--docs) | stable | The phone navigation of the shell (ADR-0069). | | [CommandPalette](https://brand.okrado.com/components/?path=/docs/shell-commandpalette--docs) | stable | The suite's command palette (Cmd/Ctrl+K). | | [Inspector](https://brand.okrado.com/components/?path=/docs/shell-inspector--docs) | beta | The right panel of a split page (ADR-0083, L4). | | [NavGroup](https://brand.okrado.com/components/?path=/docs/shell-navgroup--docs) | beta | A labelled group of sidebar items (ADR-0083). | | [ProductNav](https://brand.okrado.com/components/?path=/docs/shell-productnav--docs) | beta | The sidebar list of the active product's modules, with registry labels in the user's locale. | | [ProductSwitcher](https://brand.okrado.com/components/?path=/docs/shell-productswitcher--docs) | beta | The sidebar's product switcher. | | [SearchTrigger](https://brand.okrado.com/components/?path=/docs/shell-searchtrigger--docs) | beta | The top bar's search field (ADR-0083). | | [SuiteLink](https://brand.okrado.com/components/?path=/docs/shell-suitelink--docs) | stable | A link to any page of the suite, across zones. | | [TopBar](https://brand.okrado.com/components/?path=/docs/shell-topbar--docs) | beta | The content of the shell's 48 px top bar (ADR-0083), passed as `AppShell`'s `topBar`. | | [ZoneShell](https://brand.okrado.com/components/?path=/docs/shell-zoneshell--docs) | beta | The whole zone frame in one piece (ADR-0058, ADR-0083), which the web-zone template mounts once. |