Aback UI
One component library, every Aback product
This kit does not ship a second design system. It carries the Aback UI source, pinned to a commit, and renders it with the shared tokens. What you see on this page is the same code the dashboard, the billing screens and the next Aback product run.
The integration contract
The source is part of the product
Components are vendored into src/vendor/aback-ui, not hidden behind a package. You can read them, step through them and change them in your fork.
One token set
Colour roles, the Aback Blue ramp, type and square geometry come from the same tokens.css the rest of the ecosystem uses.
Upgrades stay reviewable
bun run ui:sync refreshes the snapshot and bun run ui:check fails when it drifts, so a library update is a diff you can read.
import { Button, Card, Field } from "@/vendor/aback-ui";Actions
The neutral ink fill is the default action. Aback Blue is reserved for a navigation or cross-sell call to action, which is why the brand variant is a deliberate choice.
Button
Seven variants, eight sizes, and an asChild escape hatch for links.
Button sizes
From xs to lg, plus the icon sizes used by toolbars.
Badge
Status and metadata, including the semantic success, warning and danger roles.
Keyboard hints
Kbd documents a shortcut that actually exists.
Forms
Labels, descriptions and errors are wired with explicit ids and aria attributes. A field never guesses the control it belongs to.
Field, input and textarea
The description and the error are announced because the relationship is explicit.
We only use it for release notices.
Use at least three characters.
Markdown is not rendered.
Selection controls
Checkbox, switch and the label primitive.
Two-factor authentication
Require a code on every new device.
Feedback
Every state a screen can be in has a component: loading, empty, informative, successful and failed.
Alert
Five semantic variants, each with a title and a description.
Heads up
Session rotated
Webhook signature rejected
Progress and spinner
Determinate work shows a value; indeterminate work shows a spinner with a label.
Skeleton
Placeholders match the shape of the content that replaces them.
Empty state
An empty screen explains what happened and offers the next action.
No releases yet
Your archive appears here as soon as a plan is active.
Navigation
Wayfinding stays consistent across the marketing site, the docs and the account area.
Breadcrumbs
The trail is also emitted as structured data on every page.
Tabs
Keyboard navigable, with the panel wired to the tab.
Accordion
One panel at a time, with a focus ring on the trigger.
Pagination
Renders links on the server and buttons when the page is interactive.
Overlays
Focus is trapped, restored and visible. Escape closes, and the trigger keeps its label.
Dialog
A modal that owns the focus until it closes.
Dropdown menu
A menu with a label, items and a separator.
Tooltip
A short hint on hover and focus, never the only place information lives.
Popover
Anchored content that can hold a form or a short explanation.
Data display
Tables, cards and identity primitives for the account and billing screens.
Table
A real table element with a caption, a header and aligned numerics.
| Plan | Updates | Support |
|---|---|---|
| Starter | Bug fixes | 5 days |
| Launch | Minor versions | 1 day |
| Scale | Every version | 1 day |
Card and avatar
A hairline card that never nests, and an avatar with a text fallback.
Account owner
Billing and licence holder for this workspace.
Avery Vale
avery@example.com
Separators use the page chrome role, which is stronger than a card border.
The same components, in any project
The library is published as a registry as well as a package. A new Aback Stack product can install the exact source without copying this repository.
npx @aback-ui/cli init
npx @aback-ui/cli add button dialog table field