Getting started

Installation

ai2 ships through the shadcn registry - no npm package, no wrapper. Components land as source files in your project.

Package manager:

Requirements

React 19 project (Next.js or Vite) with Tailwind CSS v4
A shadcn-initialized project - components.json present and cn util in lib/utils

Setup

Initialize shadcn (skip if already done)

npx shadcn@latest init

Fresh project? Run init and follow the prompts. ai2 works with any base color, its tokens install on top.

Register the @ai2 registry

components.json

{
  "registries": {
    "@ai2": "https://ai2.design/r/{name}.json"
  }
}

Install your first component

npx shadcn@latest add @ai2/button

The CLI installs npm dependencies, writes the component into components/ui, rewrites imports to your aliases, and merges the @ai2/tokens theme (tone colors, surfaces, motion variables) into your CSS automatically, as a dependency of every component.

Use it

import { Button } from "@/components/ui/button"

export function Example() {
  return (
    <Button variant="soft" tone="brand" size="lg">
      Hello ai2
    </Button>
  )
}

Dark mode

All tokens ship light and dark values. Toggle by adding the dark class to <html> - with next-themes or a few lines of your own. See Theming for the full token reference.

New components, in your inbox

We mail when something ships. Nothing else.