Resources
Registry format
Behind aback-ui add is a set of static JSON files, one per component or block, with the source inlined. You only need this page to inspect items or host your own copy.
Each item is a JSON file named after the item: button.json, sign-in.json. An index.json lists them all. The files are generated from the canonical component source and checked on every change, so the registry can never drift from the components on this site.
The same files ship in two places: inside the aback-ui npm package, which is what the CLI reads by default, and on this site at abackui.com/r, for browsing and for mirrors.
Item format
Validated against a published JSON Schema.
{
"$schema": "https://abackui.com/schema/registry-item.json",
"name": "button",
"type": "registry:ui",
"title": "Button",
"description": "The primary action, with ink, brand, outline, ghost, and destructive variants.",
"dependencies": ["class-variance-authority", "radix-ui"],
"registryDependencies": ["https://abackui.com/r/utils.json"],
"categories": ["Foundation"],
"meta": { "status": "stable", "usedIn": ["aback-tools", "aback-launch", "aback-group"] },
"files": [
{
"path": "components/ui/button.tsx",
"target": "components/ui/button.tsx",
"type": "registry:ui",
"content": "\"use client\";\n\nimport * as React from \"react\";\n…"
}
]
}| type | registry:ui for components, registry:block for blocks, registry:lib and registry:file for the helper and the theme. |
| dependencies | npm packages the files import. The CLI installs them with your package manager. |
| registryDependencies | Items to install first. Their URLs resolve against whichever registry is in use. |
| files[].target | Where the file lands, relative to components, lib, or styles. Paths outside the project are refused. |
| files[].content | The complete source, written as-is. |
Schemas: registry-item.json, registry.json, and aback-ui.json.
themeWrites styles/aback.css as a new file, so your own stylesheet only gains one import line.
utilsWrites lib/utils.ts with cn(). Every component depends on it, so it is installed once and shared.
aback-ui init installs both.
Hosting a mirror
For an internal fork, an air-gapped network, or a pinned copy.
Serve the item files and index.json from any static host, then point the CLI at the directory that contains them. A local folder works the same way.
{
"registries": {
"@aback": "https://ui.example.com/r/{name}.json"
}
}All items
73 components and blocks. Each name opens its JSON.
| Item | Type | npm dependencies |
|---|---|---|
| accordion | Navigation | radix-ui, @tabler/icons-react |
| alert | Feedback | class-variance-authority |
| alert-dialog | Overlays | radix-ui |
| avatar | Data Display | radix-ui |
| badge | Foundation | class-variance-authority |
| breadcrumbs | Navigation | @tabler/icons-react |
| button | Foundation | class-variance-authority, radix-ui |
| calendar | Data Display | @tabler/icons-react, react-day-picker |
| card | Foundation | None |
| checkbox | Forms | radix-ui, @tabler/icons-react |
| code-block | Data Display | None |
| collapsible | Navigation | radix-ui |
| combobox | Forms | @tabler/icons-react |
| command | Overlays | @tabler/icons-react, cmdk |
| copy-button | Foundation | @tabler/icons-react |
| date-picker | Forms | @tabler/icons-react, react-day-picker |
| description-list | Data Display | None |
| dialog | Overlays | radix-ui, @tabler/icons-react |
| dropdown-menu | Overlays | radix-ui, @tabler/icons-react |
| dropzone | Forms | @tabler/icons-react |
| empty-state | Application | @tabler/icons-react |
| field | Forms | @tabler/icons-react |
| hover-card | Overlays | radix-ui |
| input | Forms | None |
| input-group | Forms | None |
| kbd | Foundation | None |
| label | Forms | None |
| layout | Layout | radix-ui |
| page-header | Application | None |
| pagination | Navigation | None |
| popover | Overlays | radix-ui |
| progress | Feedback | radix-ui |
| radio-group | Forms | radix-ui |
| rating | Forms | @tabler/icons-react |
| reading-progress | Feedback | None |
| relative-time | Data Display | None |
| scroll-area | Layout | radix-ui |
| section-heading | Application | None |
| select | Forms | @tabler/icons-react |
| separator | Foundation | radix-ui |
| share-buttons | Application | @tabler/icons-react |
| sheet | Overlays | @tabler/icons-react, radix-ui |
| skeleton | Feedback | None |
| skip-link | Navigation | None |
| slider | Forms | radix-ui |
| spinner | Feedback | @tabler/icons-react |
| stat | Data Display | @tabler/icons-react |
| steps | Data Display | @tabler/icons-react |
| switch | Forms | radix-ui |
| table | Data Display | None |
| table-of-contents | Navigation | @tabler/icons-react |
| tabs | Navigation | radix-ui |
| textarea | Forms | None |
| theme-toggle | Application | @tabler/icons-react |
| toast | Feedback | @tabler/icons-react, sonner |
| toggle-group | Forms | class-variance-authority, radix-ui |
| tooltip | Overlays | radix-ui |
| article-layout | Block | @tabler/icons-react |
| cta-banner | Block | @tabler/icons-react |
| contact-form | Block | @tabler/icons-react |
| cookie-consent | Block | None |
| dashboard-shell | Block | @tabler/icons-react |
| faq | Block | None |
| feature-grid | Block | @tabler/icons-react |
| hero | Block | @tabler/icons-react |
| newsletter | Block | @tabler/icons-react |
| not-found | Block | @tabler/icons-react |
| pricing | Block | @tabler/icons-react |
| settings-section | Block | None |
| sign-in | Block | None |
| site-footer | Block | @tabler/icons-react |
| site-header | Block | @tabler/icons-react |
| users-table | Block | @tabler/icons-react |
Prefer browsing with previews? See Components and Blocks.