Installation

The slabui CLI copies components from a registry into your project. Every component version is published as an immutable file, so the CLI always knows which version you have and can update it later without losing your changes.

Create a project

The CLI installs components into an existing React app with Tailwind CSS v4. If you don't have one yet, create a project with Next.js or Vite first.

Requirements

• Node.js 22.12 or later.
• A tsconfig.json (or jsconfig.json) with a path alias, such as "@/*": ["./*"]. The CLI uses it to decide where files go and how to write imports.

Install

Add the CLI to your project as a development dependency:

pnpmnpmyarnbun
pnpm add -D slabui
Copy

The package installs the slabui command. Run it through your package manager (npx slabui, pnpm slabui, yarn slabui or bunx slabui), so everyone on the project uses the same version.

To try it without installing anything, run it with npx:

pnpmnpmyarnbun
pnpm dlx slabui@latest init
Copy

Initialize

Run init at the root of your project:

pnpmnpmyarnbun
pnpm slabui init
Copy

It detects your path alias and global CSS file and creates slabui.json. When the project has no global CSS yet, the default is globals.css in the styles folder (@/styles/globals.css).

init also prepares that CSS file with the default theme. It creates the file when it does not exist. When it exists, it replaces its content with the template and saves the original as <file>.bak; in an interactive terminal it asks first, and No keeps the file and only adds the missing theme variables. In styles/core/ (the folder of the styles alias), it creates fonts.css, base.css and utilities.css, all imported by the global CSS (see CSS files).

The theme starts small: the @theme inline block, the colors the base styles use (background, foreground, border, input, ring) and the ones almost every component uses, each with its -foreground: brand, primary, secondary, danger, success, warning and inverted. Each component you install later adds the other variables it uses, with the default values, and never changes a value you already have.

brand is your identity color (logo, highlights); primary is the color of the main actions. They start equal: when your brand color has no contrast for a button, change primary and keep brand.

Copy{
  "$schema": "https://slabui.com/schema.json",
  "css": "app/globals.css",
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks",
    "utils": "@/utils",
    "styles": "@/styles"
  },
  "items": {}
}

In an interactive terminal, init asks for each value. Options:

Each alias is the import path of a folder; rename them to match your project. add writes each file of an item to the folder of its alias:

Blocks and examples go to the folder you pass to add with --path; see Blocks and examples.

Add your first component

pnpmnpmyarnbun
pnpm slabui add button
Copy

The CLI installs the component, its dependencies (such as utils with the cn helper) and the npm packages it needs, and rewrites imports to your aliases.