Default

React Router

Set up Layout UI in a React Router v7 project with Vite and Tailwind v4.

New project

Create a React Router v7 app
React Router v7 includes its own CLI that sets up Vite and TypeScript:
```
npx create-react-router@latest my-app
cd my-app
npm install
```

Install Tailwind v4

npm install tailwindcss @tailwindcss/vite

Add the Tailwind plugin to vite.config.ts:

import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [reactRouter(), tailwindcss(), tsconfigPaths()],
});

Create or replace app/app.css:

@import "tailwindcss";

Confirm path aliases
React Router v7 uses vite-tsconfig-paths to mirror tsconfig.json paths into Vite. Add the @ alias if it is not already present:
```
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./app/*"] }
  }
}
```

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