Skip to content
Aback UI

Get started

npm package

Install the components as a dependency and import them. Same source and theme as the CLI, compiled to ESM with type declarations.

Not on npm yet

aback-ui, @aback-ui/ui, and @aback-ui/tokens are built and tested but have not been published. The commands on this page work from the first release.

CLI or package?

Both are first-class, and a project can use both: copy the components you want to change, import the rest.

CapabilityCLI (aback-ui)Package (@aback-ui/ui)
Edit a component's markup or styles
Update with a version bump
See what changed before updatingaback-ui diffChangelog
Import path@/components/ui/button@aback-ui/ui
Blocks

Set up

  1. Install the packages

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

    React 19 and React DOM are peer dependencies. Radix UI, Tabler icons, and the other runtime dependencies install with the package.

  2. Add the styles

    Import the theme after Tailwind, then point Tailwind at the package:

    app/globals.csscss
    @import "tailwindcss";
@import "@aback-ui/tokens/tokens.css";
@source "../node_modules/@aback-ui/ui/dist";

    The @source line is required

    Tailwind CSS v4 does not scan node_modules. Without @source, the classes the components use are never generated and they render unstyled. The path is relative to the stylesheet, so adjust it if your CSS is not one folder below the project root.

  3. Import components

    app/settings/save-bar.tsxtsx
    import { Button, CopyButton } from "@aback-ui/ui";

export function SaveBar({ token }: { token: string }) {
  return (
    <div className="flex gap-2">
      <CopyButton value={token} showLabel label="Copy token" />
      <Button>Save changes</Button>
    </div>
  );
}

    Everything is a named export from the package root. Interactive components carry "use client", so they work from React Server Components; presentational ones render on the server.

What each package contains

@aback-ui/ui

Every component, plus cn(), ThemeScript, and useTheme. Tree-shakeable ESM with TypeScript declarations.

@aback-ui/tokens

One file, tokens.css: the light and dark colour roles, the Aback Blue ramp, and square geometry. See Theming.

Updating

Update both packages together, since components rely on the tokens of the same release. Aback UI is pre-1.0, so a minor version can change an API; the changelog lists every change with migration notes.

npm install @aback-ui/ui@latest @aback-ui/tokens@latest