Astro

Set up Layout UI in an Astro project using the React integration and Tailwind v4.

New project

Create an Astro app

npm create astro@latest my-app
cd my-app

Add the React integration
Layout UI components are React components, so the Astro React integration is required:
```
npx astro add react
```
Add Tailwind v4
```
npx astro add tailwind
```
The Astro Tailwind integration v4 adds @tailwindcss/vite automatically. Confirm src/styles/global.css starts with:
```
@import "tailwindcss";
```

Configure path aliases

Add the @ alias to tsconfig.json:

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

Also add it to astro.config.mjs:

import { defineConfig } from "astro/config";
import react from "@astrojs/react";
import tailwindcss from "@tailwindcss/vite";
import path from "path";

export default defineConfig({
  integrations: [react()],
  vite: {
    plugins: [tailwindcss()],
    resolve: {
      alias: { "@": path.resolve("./src") },
    },
  },
});

Initialise shadcn

npx shadcn@latest init -y -b base -p nova

Add the Layout registry and install components

// components.json
{
  "registries": {
    "@layout": "https://ui.layout.design/r/{name}.json"
  }
}

npx shadcn add @layout/theme-layout
npx shadcn add @layout/button

Use Layout UI components as React islands in your .astro files with client:load for interactive components:

---
import { Button } from "@/components/ui/button";
---
<Button client:load>Get started</Button>