Installation

Add Airy to your project via the shadcn registry.

Prerequisites

Airy requires Tailwind CSS v4. Ensure your project has:

tailwindcss@^4
@tailwindcss/postcss@^4

Quick start (new project)

Scaffold a Next.js app with Airy preinstalled:

npx shadcn@latest create --preset "https://airy.lev.com/presets/airy.json" --template next --src-dir
cd <project-name>
npx shadcn@latest add @airy/component-example --overwrite

The create command always installs the default shadcn component-example (and its dependencies). The second command swaps it to the Airy version.

1. Add registry

npx shadcn@latest registry add @airy=https://airy.lev.com/r/{name}.json

Or add it to your components.json:

{
  "registries": {
    "@airy": {
      "url": "https://airy.lev.com/r/{name}.json"
    }
  }
}

2. Install

Install the full Airy system:

npx shadcn@latest add @airy/airy-all

Or install selectively:

npx shadcn@latest add @airy/airy-theme
npx shadcn@latest add @airy/button @airy/card @airy/dialog

3. Import styles

Import the theme files in your global CSS:

@import "tailwindcss";
@import "./styles/primitives.css";
@import "./styles/airy.css";