Skip to content
Aback UI

Get started

Installation

Two commands: init sets up the theme once, add copies a component into your project. The files are yours to edit.

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.

Requirements

  • React 19The components are written and tested against React 19.
  • Tailwind CSS v4The theme uses v4's @theme inline. init stops on v3.
  • A @/ path aliasInstalled files import @/components/ui and @/lib/utils.

Any React framework works. The CLI recognizes Next.js, Vite, Remix, and Astro and picks sensible defaults for each.

Set up a project

  1. Create a project

    Skip this step for an existing project. A new Next.js app comes with TypeScript, Tailwind CSS v4, and the @/ alias already configured:

    npx create-next-app@latest my-app --yes

  2. Run init

    Run this once, in the project root:

    npx aback-ui@latest init

    It finds your global stylesheet, adds the Aback theme, and installs the two packages the class helper needs. See exactly what it changes.

  3. Add a component

    npx aback-ui@latest add button

    The source lands in components/ui/button.tsx, under src/ if your project has one. Components that build on others bring them along: add dialog also installs Button. Add several at once with add button dialog field.

  4. Use it

    app/page.tsxtsx
    import { Button } from "@/components/ui/button";

export default function Page() {
  return <Button>Save changes</Button>;
}

    The default button is neutral ink. Use variant="brand" for a brand action, and keep one primary action per surface.

What init changes

Nothing outside this list is touched. Add --dry-run to see the plan without writing.

FileChange
aback-ui.jsonNew. Records your aliases and stylesheet so later commands know where files go.
styles/aback.cssNew. The theme: colour roles for light and dark, the Aback Blue ramp, and square geometry.
lib/utils.tsNew. The cn() class helper every component imports.
Your global stylesheetOne line added after the Tailwind import: @import of styles/aback.css.
package.jsonclsx and tailwind-merge added, through the package manager your lockfile uses.
app/globals.csscss
@import "tailwindcss";
@import "../styles/aback.css";
If init cannot find your stylesheet, name it: npx aback-ui@latest init --css src/index.css. Files that already exist are kept unless you confirm the overwrite.

Everyday commands

aback-ui add sign-inInstall a block. It lands in components/blocks with every component it uses.
aback-ui list formsSearch what you can install, grouped by category.
aback-ui diff --allSee how your copies differ from the current version before you update.
aback-ui doctorCheck the setup: Tailwind, aliases, theme import, and installed files.

Every command and option is in the CLI reference.

Where to next