# Aback UI

> Aback UI is an open-source React component library and design system from Aback Group. Components are copied into your project as source by the aback-ui CLI, or imported from the @aback-ui/ui npm package. They use square corners, neutral ink actions, the Aback Blue brand ramp, and semantic CSS tokens with light and dark themes.

- Website: https://abackui.com
- CLI: `npx aback-ui@latest <command>` (npm package `aback-ui`; the registry ships inside it)
- Components package: `@aback-ui/ui`, theme package: `@aback-ui/tokens`
- Registry item JSON: https://abackui.com/r/{name}.json, index: https://abackui.com/r/index.json
- License: MIT (code). The Aback name and mark are trademarks.
- Status: pre-1.0. APIs may change before the first stable release.
- Requirements: React 19, Tailwind CSS v4, a `@/` path alias.

## Install with the CLI

```bash
npx aback-ui@latest init
npx aback-ui@latest add button
```

`init` writes aback-ui.json, styles/aback.css, and lib/utils.ts, and imports the theme in your global stylesheet. `add` copies each component and the components it uses into components/ui.

## Install the npm package

```bash
npm install @aback-ui/ui @aback-ui/tokens
```

```css
@import "tailwindcss";
@import "@aback-ui/tokens/tokens.css";
@source "../node_modules/@aback-ui/ui/dist";
```

## Documentation

- [Introduction](https://abackui.com/docs): What Aback UI is, what is in it, and the two ways to use it.
- [Installation](https://abackui.com/docs/installation): Set up a project and add your first component with the aback-ui CLI.
- [npm package](https://abackui.com/docs/package): Install @aback-ui/ui and import components instead of copying them.
- [CLI](https://abackui.com/docs/cli): Every aback-ui command, option, and the aback-ui.json reference.
- [Theming](https://abackui.com/docs/theming): Semantic colour roles and how to override them safely.
- [Dark mode](https://abackui.com/docs/dark-mode): Light, dark, and system themes without a flash on load.
- [Design tokens](https://abackui.com/docs/tokens): Every colour, the Aback Blue ramp, type, spacing, and shape.
- [Accessibility](https://abackui.com/docs/accessibility): Keyboard behavior by component and what has been verified.
- [Registry format](https://abackui.com/docs/registry): The item JSON the CLI installs, its schema, and self-hosting.
- [Contributing](https://abackui.com/docs/contributing): How the repository is organized and how to propose a component.
- [Changelog](https://abackui.com/docs/changelog): What changed in each release.
- [Built with Aback UI](https://abackui.com/built-with): The Aback products whose interfaces shaped the system.

## Components

### Foundation

- [Badge](https://abackui.com/docs/components/badge): Compact labels for status, counts, and categories, with soft status variants and an optional dot.
- [Button](https://abackui.com/docs/components/button): The primary action, with ink, brand, outline, ghost, and destructive variants.
- [Card](https://abackui.com/docs/components/card): A bordered surface for grouping related content and actions.
- [Copy Button](https://abackui.com/docs/components/copy-button): Copies a value and confirms it in place, with an announced result and a failure state.
- [Kbd](https://abackui.com/docs/components/kbd): A keycap for documenting shortcuts.
- [Separator](https://abackui.com/docs/components/separator): A one-pixel rule for page chrome and grouped content.

### Layout

- [Layout](https://abackui.com/docs/components/layout): Container, Stack, Group, and Grid primitives that map to the Aback spacing scale.
- [Scroll Area](https://abackui.com/docs/components/scroll-area): A focusable, themed scroll container for long lists and panels.

### Forms

- [Checkbox](https://abackui.com/docs/components/checkbox): A tri-state checkbox with label support and visible focus.
- [Combobox](https://abackui.com/docs/components/combobox): A searchable single-select field built on Popover and Command.
- [Date Picker](https://abackui.com/docs/components/date-picker): A date field and a range field, with real keyboard behavior and native form support.
- [Dropzone](https://abackui.com/docs/components/dropzone): A keyboard-operable drag-and-drop file area that validates type, size, and count.
- [Field](https://abackui.com/docs/components/field): A form field frame that wires labels, help text, and errors.
- [Input](https://abackui.com/docs/components/input): A single-line text control aligned to the 36px control grid.
- [Input Group](https://abackui.com/docs/components/input-group): Joins an input with units, prefixes, icons, or a compact button inside one 36px frame.
- [Label](https://abackui.com/docs/components/label): An accessible form label with peer-disabled styling.
- [Radio Group](https://abackui.com/docs/components/radio-group): Mutually exclusive choices with arrow-key selection and a visible label.
- [Rating](https://abackui.com/docs/components/rating): A star rating built on native radios, with a read-only display for averages.
- [Select](https://abackui.com/docs/components/select): A native select with a themed chevron and 36px height.
- [Slider](https://abackui.com/docs/components/slider): A single-value range control with keyboard support and a square thumb.
- [Switch](https://abackui.com/docs/components/switch): A binary toggle with switch semantics.
- [Textarea](https://abackui.com/docs/components/textarea): A multi-line text control for longer input.
- [Toggle Group](https://abackui.com/docs/components/toggle-group): A set of related toggles with shared styling and keyboard behavior.

### Feedback

- [Alert](https://abackui.com/docs/components/alert): Inline status messages for information, success, warning, and destructive feedback.
- [Progress](https://abackui.com/docs/components/progress): A determinate or indeterminate bar for work that takes time.
- [Reading Progress](https://abackui.com/docs/components/reading-progress): A decorative bar that fills as the reader moves through an article.
- [Skeleton](https://abackui.com/docs/components/skeleton): A loading placeholder that preserves layout.
- [Spinner](https://abackui.com/docs/components/spinner): A loading indicator with a screen-reader label.
- [Toast](https://abackui.com/docs/components/toast): Transient status messages with actions, themed by the Aback tokens.

### Overlays

- [Alert Dialog](https://abackui.com/docs/components/alert-dialog): A modal that requires an explicit response before an irreversible action runs.
- [Command](https://abackui.com/docs/components/command): A keyboard-first command palette with filtering, groups, and shortcuts.
- [Dialog](https://abackui.com/docs/components/dialog): A modal dialog with focus trapping, Escape dismissal, and focus return.
- [Dropdown Menu](https://abackui.com/docs/components/dropdown-menu): A keyboard-navigable action menu with checkbox and radio items.
- [Hover Card](https://abackui.com/docs/components/hover-card): A short profile or context card shown on hover and keyboard focus.
- [Popover](https://abackui.com/docs/components/popover): A floating panel anchored to a trigger, for filters and compact detail.
- [Sheet](https://abackui.com/docs/components/sheet): A modal panel that slides in from an edge for settings and filters.
- [Tooltip](https://abackui.com/docs/components/tooltip): A short label for icon-only or ambiguous controls.

### Navigation

- [Accordion](https://abackui.com/docs/components/accordion): Disclosure sections for FAQs and grouped settings, with full keyboard support.
- [Breadcrumbs](https://abackui.com/docs/components/breadcrumbs): A hierarchical trail back to parent pages with current-page semantics.
- [Collapsible](https://abackui.com/docs/components/collapsible): A single disclosure region for optional or advanced content.
- [Pagination](https://abackui.com/docs/components/pagination): Page controls with a current-page marker, collapsing ranges, and link mode.
- [Skip Link](https://abackui.com/docs/components/skip-link): The first focusable element, which jumps keyboard users past the header to the content.
- [Table of Contents](https://abackui.com/docs/components/table-of-contents): An "On this page" list of anchors that tracks the section in view.
- [Tabs](https://abackui.com/docs/components/tabs): Switch between related panels with arrow-key navigation.

### Data Display

- [Avatar](https://abackui.com/docs/components/avatar): A square identity chip with an initials fallback, and an overlapping group with a counted overflow.
- [Calendar](https://abackui.com/docs/components/calendar): A square-cornered month grid with single, multiple, and range selection.
- [Code Block](https://abackui.com/docs/components/code-block): A captioned, scrollable code sample with a copy button and optional line numbers.
- [Description List](https://abackui.com/docs/components/description-list): Key and value rows for metadata, breakdowns, and totals, as a real description list.
- [Relative Time](https://abackui.com/docs/components/relative-time): A hydration-safe "3 hours ago" timestamp, localized by Intl and refreshed on one shared clock.
- [Stat](https://abackui.com/docs/components/stat): A labelled number with unit, trend, hint, and tone, plus a responsive grid.
- [Steps](https://abackui.com/docs/components/steps): An ordered sequence with complete, current, and upcoming states for onboarding and how-it-works sections.
- [Table](https://abackui.com/docs/components/table): Semantic table primitives for dense data.

### Application

- [Empty State](https://abackui.com/docs/components/empty-state): A clear zero-data state with an optional action.
- [Page Header](https://abackui.com/docs/components/page-header): The page title block with one H1, a description, and actions.
- [Section Heading](https://abackui.com/docs/components/section-heading): The eyebrow, title, description, and action that open a page section.
- [Share Buttons](https://abackui.com/docs/components/share-buttons): Share links for X, LinkedIn, and more, with copy link and the native share sheet.
- [Theme Toggle](https://abackui.com/docs/components/theme-toggle): A light and dark switch, a useTheme hook, and a no-flash theme script.

## Blocks

- [Article layout](https://abackui.com/docs/blocks/article-layout): A long-form page with meta bar, scoped typography, sticky contents, share links, and reading progress.
- [Call to action](https://abackui.com/docs/blocks/cta-banner): A closing banner with one primary and one optional secondary action, in brand or neutral tone.
- [Contact form](https://abackui.com/docs/blocks/contact-form): A contact form with field-level errors, focus on the first error, a character count, and submit states.
- [Cookie consent](https://abackui.com/docs/blocks/cookie-consent): A non-blocking consent banner with equally prominent accept and decline, remembered per browser.
- [Dashboard shell](https://abackui.com/docs/blocks/dashboard-shell): A responsive application shell with persistent navigation, a mobile sheet, top bar, and page header.
- [FAQ](https://abackui.com/docs/blocks/faq): Questions in an accordion with indexable closed answers and optional FAQPage structured data.
- [Feature grid](https://abackui.com/docs/blocks/feature-grid): A titled grid of features with brand icon chips and optional links, joined by hairlines.
- [Hero](https://abackui.com/docs/blocks/hero): A landing-page opening with announcement, h1, highlight line, actions, proof points, and an aside.
- [Newsletter signup](https://abackui.com/docs/blocks/newsletter): An email signup with real submitting, success, and error states driven by your subscribe call.
- [Not found](https://abackui.com/docs/blocks/not-found): A 404 page with a way forward: home, an alternative, and the destinations people usually want.
- [Pricing](https://abackui.com/docs/blocks/pricing): Plan cards with a monthly or yearly switch, Intl prices, included and excluded features, and aligned actions.
- [Settings section](https://abackui.com/docs/blocks/settings-section): A workspace settings section with identity fields, preferences, a save bar, and a confirmed danger zone.
- [Sign in](https://abackui.com/docs/blocks/sign-in): A complete sign-in card with email, password, remember me, and account links.
- [Site footer](https://abackui.com/docs/blocks/site-footer): Brand column, link columns, and a legal bar that collapse cleanly from four columns to one.
- [Site header](https://abackui.com/docs/blocks/site-header): A sticky header with brand, primary navigation, optional search, theme toggle, actions, and a mobile sheet.
- [Users table](https://abackui.com/docs/blocks/users-table): A searchable member directory with role filters, sorting, row actions, empty state, and pagination.