Installation

Requirements#

• Node.js 22.12 or newer for the aiw CLI.
• React 19 and Tailwind CSS 4 in the project. TypeScript is recommended, every prop is typed.
• The aiw CLI when you work with commands or an AI assistant. Copy & Paste works without it.

You install the CLI once per machine with npm. After that aiw is ready in every terminal.

npm i -g ai-website
aiw doctor

New project with aiw new#

The fastest way. aiw new creates an Astro project with React islands, Tailwind 4, a sitemap, the import alias, the presets kit and scroll, a .mcp.json for AI assistants and a CLAUDE.md with the rules of the stack.

1. Create the project

   aiw new bakery-site

   Add --dry-run to see the plan first.

2. Start the dev server

   npmpnpmbun

   cd bakery-site
   npm run dev

   cd bakery-site
   pnpm dev

   cd bakery-site
   bun run dev

3. Add components

   aiw add @ai-website/hero @ai-website/pricing

   aiw components or the Components page shows what there is.

Existing project#

Already have a project with React and Tailwind 4? aiw add kit brings the foundation, which means tokens, helpers, icons, button and section along with Inter as the typeface. It finds the alias, the target folders and the main CSS of your framework on its own and writes the imports right after @import "tailwindcss";.

aiw add kit

Components land where the alias @/* points, in components/ui, helpers in lib, styles in styles. When the alias is missing, aiw add adds it. Pick another folder for components with --path.

Astro#

React and Tailwind come with the Astro integration, then the kit.

npx astro add react tailwind
aiw add kit

pnpm astro add react tailwind
aiw add kit

bunx astro add react tailwind
aiw add kit

Astro reads the alias from tsconfig.json, nothing else is needed.

Next.js#

Tested with Next.js 16 and the App Router, with and without a src folder. create-next-app brings Tailwind 4 and the alias.

npx create-next-app@latest my-app --ts --tailwind --app
cd my-app
aiw add kit

pnpm create next-app my-app --ts --tailwind --app
cd my-app
aiw add kit

bunx create-next-app my-app --ts --tailwind --app
cd my-app
aiw add kit

aiw add kit writes the imports into app/globals.css and removes the starter colors and font of the Next template, which would otherwise cover the tokens. Anything you changed there yourself stays.

Every component file and @/lib/kit carry 'use client'. That is why you render components straight from server components, the interactive ones included.

// app/page.tsx, a server component
import { Hero } from '@/components/ui/hero';

export default function Page() {
  return <Hero variant="centered" title="…" />;
}

Vite#

Tested with Vite 8 and the react-ts template. Tailwind comes through its Vite plugin, then the kit.

npm install tailwindcss @tailwindcss/vite
aiw add kit

pnpm add tailwindcss @tailwindcss/vite
aiw add kit

bun add tailwindcss @tailwindcss/vite
aiw add kit

Vite reads the alias only when its config says so. aiw add writes resolve: { tsconfigPaths: true } into vite.config.ts and the alias into tsconfig.app.json. This is the file afterwards.

import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: { tsconfigPaths: true },
  plugins: [react(), tailwindcss()],
});

Import alias#

Every component imports its neighbours through @/components/ui/… and the helpers through @/lib/kit. The alias @/* points at src for that, or at the root in Next.js without a src folder. aiw new and aiw add set it for you, by hand it sits in tsconfig.json.

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Include kit.css#

kit.css sits once in your main CSS, right after Tailwind. It holds the colors for both modes, the accents, the type scale and the kit-* helper classes. aiw add kit writes these lines, by hand it looks like this per framework, in src/styles/global.css, app/globals.css or src/index.css.

@import "tailwindcss";
@import "@fontsource-variable/inter";
@import "./kit.css";

@import "tailwindcss";
@import "@fontsource-variable/inter";
@import "../styles/kit.css";

@import "tailwindcss";
@import "@fontsource-variable/inter";
@import "./styles/kit.css";

Your first component#

Build a page from one React file that groups several components. KitProvider in it sets the language of the built-in texts for everything below.

import { KitProvider } from '@/lib/kit';
import { Hero } from '@/components/ui/hero';

export function Home() {
  return (
    <KitProvider locale="en">
      <Hero
        variant="split"
        title="Fresh bread, every morning"
        description="Lindner Bakery has been baking in Hamburg since 1962. Order today, pick up tomorrow from seven."
        primaryAction={{ label: 'Order now', href: '/order' }}
        secondaryAction={{ label: 'See the range', href: '/range' }}
      />
    </KitProvider>
  );
}

In Astro you add the file as an island. client:visible loads the JavaScript once the area comes into view, the content is there as HTML before that.

---
import '../styles/global.css';
import { Home } from '../components/Home';
---

<html lang="en" class="dark">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Lindner</title>
  </head>
  <body class="bg-background text-foreground">
    <Home client:visible />
  </body>
</html>

Next, learn how components are built and how theming works.

Works with#

Built on React 19, Tailwind CSS 4 and TypeScript. Installed, built and rendered in Astro 7, Next.js 16 and Vite 8.