Skip to content
1.6k

Vite

Set up Neobrutalism.com in a Vite + React project — Tailwind, path aliases, the shadcn CLI, and your first component.

1. Create your project

Create a new React + TypeScript project with Vite:

pnpm create vite@latest my-app -- --template react-ts
npm create vite@latest my-app -- --template react-ts
yarn create vite@latest my-app -- --template react-ts
bun create vite@latest my-app -- --template react-ts

2. Install Tailwind CSS

pnpm add tailwindcss @tailwindcss/vite
npm install tailwindcss @tailwindcss/vite
yarn add tailwindcss @tailwindcss/vite
bun add tailwindcss @tailwindcss/vite

Replace everything in src/index.css with:

src/index.css
@import "tailwindcss";

3. Configure path aliases

Add baseUrl and paths to both tsconfig.json and tsconfig.app.json so the @/* alias resolves:

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

4. Update vite.config.ts

Install the Node types, then teach Vite to resolve the alias:

pnpm add -D @types/node
npm install -D @types/node
yarn add -D @types/node
bun add -D @types/node
vite.config.ts
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

5. Run the init

pnpm dlx shadcn@latest init
npx shadcn@latest init
yarn dlx shadcn@latest init
bunx --bun shadcn@latest init

6. Add the fonts & theme

Follow the Fonts & Theme steps to get the signature look — the tokens are plain Tailwind v4 CSS, nothing Vite-specific.

7. Add a component

Install straight from the registry URL — swap /r/radix/ for /r/base/ if you're on Base UI primitives:

pnpm dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
npx shadcn@latest add https://neobrutalism.com/r/radix/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/radix/button.json

Every other component installs the same way — each component page shows the exact URL for both variants.