Get started
Introduction
Aback UI is the interface foundation for Aback Group products and an open-source React component library for everyone else: accessible components, complete blocks, and one set of design tokens.
Two ways to use it
Pick per project, or mix them. Both use the same components and the same theme.
Copy the source
Recommended. You own and can edit every file.
npx aback-ui@latest add buttonInstall the package
Import components and update with a version bump.
npm install @aback-ui/ui @aback-ui/tokensComponents are focused building blocks: buttons, fields, dialogs, menus, tables, and the application patterns around them, such as page headers and empty states. Blocks are whole sections assembled from those components: a sign-in card, a pricing table, a dashboard shell. A block owns no routing, data, or backend; you pass the callbacks.
Tokens are the CSS variables underneath: semantic colour roles for light and dark, the Aback Blue ramp, and square geometry. Every component reads them, so changing a token changes the whole interface.
Principles
In priority order, these decide what gets built and how.
- Accessible by defaultNative elements first, Radix primitives for complex widgets, visible focus, and keyboard behavior covered by tests.
- Source you ownThe CLI copies the canonical file into your project. There is no runtime to adopt and no lock-in.
- Tokens with intentComponents read semantic roles such as foreground, border, and link, never one-off colours.
- Square and preciseZero radius, one-pixel hairlines, and depth from borders before shadows.