UI catalogue
Ndigo UI is a copy-in design system: install an item, own the source, and style it with the
--nd-* tokens. There is no runtime dependency, no React, and no Tailwind.
The registry has 42 items: 2 foundation, 35 primitives, 5 blocks. Most primitives depend on the theme; behaviour primitives also depend on the element foundation. The CLI installs registry dependencies for you.
Install
Section titled “Install”Configure the @ndigo namespace in components.json:
{ "registries": { "@ndigo": "https://ndigo.dev/r/{name}.json" }}Then add an item:
npx shadcn@latest add @ndigo/buttonThe direct URL works without configuration:
npx shadcn@latest add https://ndigo.dev/r/button.jsonFoundation
Section titled “Foundation”| Item | Description | Depends on |
|---|---|---|
| Ndigo element foundation | Shared light-DOM custom-element base and the Zag.js machine controller. | — |
| Ndigo theme | Ndigo brand tokens (–nd-*) plus the opt-in base layer for native elements. | — |
Primitives
Section titled “Primitives”| Item | Description | Depends on |
|---|---|---|
| A2UI surface | Renders A2UI 1.0 surfaces with the installed ndigo-ui custom elements. | Ndigo element foundation |
| Accordion | Expandable items with single/multiple and collapsible modes. | Ndigo element foundation |
| Alert | Inline status message with info, success, warning, and danger variants. | — |
| Aspect ratio | Fixed-ratio media frame that reserves space before loading. | — |
| Badge | Compact status label with neutral, accent, and semantic variants. | — |
| Breadcrumb | Hierarchical page trail with links and a current-page marker. | — |
| Button | Native-first button styles with variants and sizes; no runtime and no custom element. | — |
| Card | Content surface with media, header, content, and footer parts. | — |
| Checkbox and radio | Native checkboxes and radios with the brand accent, focus, and choice-group layout. | — |
| Combobox | Filterable single-select with an input, listbox, and filtered collection. | Ndigo element foundation |
| Date picker | Popup calendar with an ISO form value, keyboard navigation, and min/max bounds. | Ndigo element foundation |
| Dialog | Modal dialog with focus trapping, dismissal, and ARIA wiring from the Zag.js dialog machine. | Ndigo element foundation |
| Drawer | Edge-anchored dialog with end, start, bottom, and top placement. | Ndigo element foundation |
| Field | Label, help, and error scaffolding for native form controls. | Input |
| File upload | Dropzone with accept/size/count validation, a hidden file input, and a removable file list. | Ndigo element foundation |
| Input | Native text inputs and textareas with focus, disabled, and invalid states. | — |
| Item | List row with media, title, description, and trailing actions. | — |
| Keyboard key | Key caps and keyboard chords for shortcut hints. | — |
| Menu | Dropdown menu with roving highlight, typeahead, and dismissal from the Zag.js menu machine. | Ndigo element foundation |
| Navigation menu | Site navigation with dropdown content, hover/click triggers, and keyboard item navigation. | Ndigo element foundation |
| Pagination | Native page navigation with links, a current-page state, ellipsis, and disabled edges. | — |
| Popover | Non-modal overlay with a trigger, positioned surface, title/description, close, and arrow. | Ndigo element foundation |
| Scroll area | Styled scrolling viewport with custom scrollbars, corner, and hover/drag states. | Ndigo element foundation |
| Select | Single-select dropdown with a hidden native select and listbox options. | Ndigo element foundation |
| Separator | Horizontal or vertical rule for grouping content. | — |
| Skeleton | Loading placeholder shapes with a reduced-motion-safe shimmer. | — |
| Slider | Single-value range with track, range, thumb, and keyboard steps. | Ndigo element foundation |
| Spinner | Rotating loading indicator with sizes and reduced-motion handling. | — |
| Switch | Labelled toggle with a hidden checkbox and the ARIA switch contract. | Ndigo element foundation |
| Table | Native tables with an overflow wrapper, sortable headers, numeric alignment, and row states. | — |
| Tabs | Tablist, roving focus, arrow navigation, and tabpanels. | Ndigo element foundation |
| Tags input | Removable tag chips with a hidden form value, max limit, paste parsing, and inline editing. | Ndigo element foundation |
| Toast | Single transient notification with live-region semantics and auto-dismiss. | — |
| Tooltip | Hint surface with hover/focus delays, arrow, and aria-describedby wiring. | Ndigo element foundation |
| Typography | Scoped prose styles for rendered long-form content. | — |
Blocks
Section titled “Blocks”| Item | Description | Depends on |
|---|---|---|
| App shell | Responsive application frame with a skip link, banner, primary nav, sidebar, main landmark, and footer. | Ndigo theme, Button |
| Code block | Preformatted code surface with a language label, copy button, and nd-copy event. | Ndigo theme, Button |
| Command palette | Modal command palette: a combobox inside a dialog, opened with Cmd/Ctrl+K. | Ndigo theme, Button, Dialog, Combobox |
| Data table | Sortable, selectable, paged table composed from the table, checkbox, button, and pagination items. | Ndigo theme, Table, Checkbox and radio, Button, Pagination |
| Sidebar | Sticky section navigation with native collapsible groups, active links, and a footer. | Ndigo theme |