Airy Design System

Airy is Levco's design system built on shadcn/ui. It provides a consistent UI foundation across product apps and marketing surfaces, plus AI guidance for creating new assets.

Quick Start

Install from the registry:

npx shadcn@latest registry add @airy=https://airy.lev.com/r/{name}.json
npx shadcn@latest add @airy/airy-theme @airy/airy-rules
npx shadcn@latest add @airy/button @airy/card

Import components and styles:

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { ThemeProvider } from "@/components/ui/theme-provider";

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

Theme Provider

Wrap your app with the theme provider:

import { ThemeProvider } from "@/components/ui/theme-provider";

export function AppShell({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
      {children}
    </ThemeProvider>
  );
}

Design Themes

Airy supports two design themes, each with light and dark modes:

• App theme: :root and .dark
• Marketing theme: .theme-marketing and .theme-marketing.dark

Use the ThemeSwitcher component or useDesignTheme hook to toggle between App and Marketing.

Rules of Use

• Always prefer Airy components over custom primitives.
• Use semantic colors (background, foreground, primary, etc).
• Use the theme tokens defined in src/styles/airy.css.