Installation

Voraussetzungen#

• Node.js 22.12 oder neuer für die aiw CLI.
• React 19 und Tailwind CSS 4 im Projekt. TypeScript ist empfohlen, jede Prop ist typisiert.
• Die aiw CLI, wenn du mit Commands oder einem KI-Assistenten arbeitest. Für Copy & Paste brauchst du sie nicht.

Die CLI installierst du einmal je Rechner über npm. Danach steht aiw überall im Terminal bereit.

npm i -g ai-website
aiw doctor

Neues Projekt mit aiw new#

Der schnellste Weg. aiw new legt ein Astro-Projekt mit React-Inseln, Tailwind 4, Sitemap, dem Import-Alias, den Presets kit und scroll, einer .mcp.json für KI-Assistenten und einer CLAUDE.md mit den Regeln des Stacks an.

1. Projekt anlegen

   aiw new bakery-site

   Mit --dry-run siehst du zuerst den Plan.

2. Dev-Server starten

   npmpnpmbun

   cd bakery-site
   npm run dev

   cd bakery-site
   pnpm dev

   cd bakery-site
   bun run dev

3. Components hinzufügen

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

   Welche es gibt, zeigt aiw components oder die Seite Components.

Bestehendes Projekt#

Hast du schon ein Projekt mit React und Tailwind 4, holt aiw add kit das Fundament dazu, also Tokens, Helfer, Icons, Button und Section samt Inter als Schrift. Der Command findet Alias, Zielordner und Haupt-CSS deines Frameworks selbst und trägt die Imports direkt hinter @import "tailwindcss"; ein.

aiw add kit

Components landen dort, wohin der Alias @/* zeigt, in components/ui, Helfer in lib, Styles in styles. Fehlt der Alias, legt aiw add ihn an. Mit --path wählst du einen anderen Ordner für Components.

Astro#

React und Tailwind kommen mit der Astro-Integration, danach das 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 liest den Alias aus der tsconfig.json, mehr braucht es nicht.

Next.js#

Getestet mit Next.js 16 und dem App Router, mit und ohne src-Ordner. create-next-app bringt Tailwind 4 und den Alias mit.

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 schreibt die Imports in app/globals.css und nimmt dabei die Startfarben und die Schrift der Next-Vorlage heraus, die sonst die Tokens überdecken. Was du dort selbst geändert hast, bleibt.

Jede Component-Datei und @/lib/kit tragen 'use client'. Du renderst Components deshalb direkt aus Server Components, auch die interaktiven.

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

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

Vite#

Getestet mit Vite 8 und der Vorlage react-ts. Tailwind kommt über sein Vite-Plugin, danach das 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 liest den Alias nur, wenn die Konfiguration es sagt. aiw add trägt resolve: { tsconfigPaths: true } in die vite.config.ts ein und den Alias in tsconfig.app.json. So sieht die Datei danach aus.

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#

Jede Component importiert ihre Nachbarn über @/components/ui/… und die Helfer über @/lib/kit. Der Alias @/* zeigt dafür auf src, bei Next.js ohne src-Ordner auf die Wurzel. aiw new und aiw add setzen ihn selbst, von Hand steht er in der tsconfig.json.

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

kit.css einbinden#

kit.css steht einmal im Haupt-CSS, direkt hinter Tailwind. Darin liegen die Farben für beide Modi, die Akzente, die Typo-Skala und die Hilfsklassen kit-*. aiw add kit schreibt diese Zeilen, von Hand sieht es je Framework so aus, in src/styles/global.css, app/globals.css oder 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";

Deine erste Component#

Bau eine Seite aus einer React-Datei, die mehrere Components zusammenfasst. KitProvider setzt darin die Sprache der eingebauten Texte für alles darunter.

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

export function Home() {
  return (
    <KitProvider locale="de">
      <Hero
        variant="split"
        title="Frisches Brot, jeden Morgen"
        description="Bäckerei Lindner backt seit 1962 in Ottensen. Heute vorbestellen, morgen ab sieben abholen."
        primaryAction={{ label: 'Jetzt vorbestellen', href: '/order' }}
        secondaryAction={{ label: 'Sortiment ansehen', href: '/range' }}
      />
    </KitProvider>
  );
}

In Astro bindest du die Datei als Insel ein. client:visible lädt das JavaScript erst, wenn der Bereich ins Bild kommt, der Inhalt steht schon vorher als HTML da.

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

<html lang="de" 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>

Weiter geht es mit dem Aufbau der Components und dem Theming.

Läuft mit#

Gebaut auf React 19, Tailwind CSS 4 und TypeScript. Installiert, gebaut und gerendert in Astro 7, Next.js 16 und Vite 8.