Skip to content
Aback UI

Get started

CLI

aback-ui sets up a project and copies components into it as source you own. There is nothing to install globally and no account.

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.

Usage

Run it with your package manager's one-off runner. @latest makes sure you get the newest components.

npx aback-ui@latest <command> [options]

Commands

aback-ui init

Set up a project once.

Checks for Tailwind CSS v4, finds your global stylesheet and path alias, then writes aback-ui.json, styles/aback.css, and lib/utils.ts, imports the theme in your stylesheet, and installs clsx and tailwind-merge. If aback-ui.json already exists it does nothing; pass --force to rewrite it.

$ npx aback-ui@latest init --css src/index.css

aback-ui add <items...>

Copy components or blocks into the project.

Resolves each item and every item it builds on, writes them in dependency order, and installs the npm packages they import. Components go to components/ui and blocks to components/blocks, following your aliases.

$ npx aback-ui@latest add dialog dropdown-menu sign-in

aback-ui diff [items...]

Compare your copies with the current version.

Prints a line diff for each file that differs from the version this CLI ships. It never writes. --all checks every installed component and block; --json is for CI.

$ npx aback-ui@latest diff --all

aback-ui doctor

Check the setup without changing anything.

Checks Node, the framework, Tailwind v4, aback-ui.json, path aliases, the class helper, the theme file and its import, the registry entry, installed components, and conflicting lockfiles. Errors exit with a non-zero code; warnings do not.

$ npx aback-ui@latest doctor --json

aback-ui list [query]

See what you can install.

Lists every component and block grouped by category. A query filters by name, title, description, and category.

$ npx aback-ui@latest list date

aback-ui view <item>

Inspect one item before installing it.

Shows the description, npm dependencies, the components it builds on, and where each file will be written.

$ npx aback-ui@latest view sign-in

Options

OptionWhat it does
--yes, -yAccept defaults and keep every existing file. For scripts and CI.
--overwriteReplace existing files without asking.
--no-overwriteKeep every existing file without asking.
--dry-runShow what would be written and installed, then stop.
--no-installWrite files but skip installing npm packages.
--cwd <dir>Run against another project directory.
--css <file>The global stylesheet for init, when it cannot be found.
--forceLet init rewrite an existing aback-ui.json.
--registry <url>Install from a mirror or a local registry build instead of the bundled one.
--jsonMachine-readable output for diff, doctor, list, and view.
--allWith diff: compare every installed item.
--version, -vPrint the CLI version.
--help, -hPrint the help text.

Existing files

The CLI never replaces a file silently.

  • Interactively, it asks before replacing each file that already exists.
  • --yes and --no-overwrite keep your files; --overwrite replaces them.
  • Before updating a component you have edited, run aback-ui diff to see both versions side by side.
  • Files are only ever written inside the project. An item that names a path outside it is refused.

aback-ui.json

Written by init and read by every other command. Edit it to change where files go.

aback-ui.jsonjson
{
  "$schema": "https://abackui.com/schema/aback-ui.json",
  "style": "aback",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "app/globals.css"
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@aback": "https://abackui.com/r/{name}.json"
  },
  "framework": "next"
}
tailwind.cssThe global stylesheet init added the theme import to.
aliasesImport aliases from your tsconfig paths. They decide where files are written.
rscTrue for React Server Components projects, such as the Next.js App Router.
registriesWhere items come from. The @aback entry above means the copy bundled with the CLI.

Where components come from

The source of every component and block ships inside the aback-ui npm package. Installing does not download code from a website, the files always match the CLI version you ran, and it keeps working if abackui.com is unreachable. Your package manager still installs npm dependencies such as Radix UI.

Mirrors and private forks

Point the CLI at your own copy with --registry https://ui.example.com/r, the ABACK_UI_REGISTRY environment variable, or the @aback entry in aback-ui.json. The registry format page describes the files a registry serves.