Introduction

What is ai2?

ai2 is a set of 51 open-source components built on the same primitives and anatomy as shadcn/ui. You install them with the same CLI, they land in the same components/ui folder, and they are yours to edit. The difference is what each component ships with:

• Variant matrix. Components expose variant × tone × size axes instead of a single flat variant list. Button alone has 300 combinations (5 variants × 6 tones × 10 sizes).
• Six tone channels. neutral, brand, success, warning, danger and info are semantic tokens available on every tone-aware component.
• One token source. tokens.json generates the CSS and the registry theme item. Change one value, every component in both modes follows.
• Agent-native. Every registry item carries a description, docs and a working example, so AI agents can discover and install components through the shadcn MCP server.

Quick start

Add the registry to your components.json:

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

Then install any component - dependencies, tokens and styles come with it:

npx shadcn@latest add @ai2/button

See Installation for the full setup, or jump straight to the Button reference.

Relationship to shadcn/ui

Compatibility is deliberate, not incidental. ai2 keeps the shadcn variable names, file conventions and registry format so that your muscle memory, existing snippets and AI agents keep working. If you know shadcn, you already know ai2. The new axes are additive.