## Using ShadCN with Wasp 0.12 and beyond


> [!NOTE]
> We'll be loosly following the Vite instructions for ShadCN since Wasp is using Vite + React: https://ui.shadcn.com/docs/installation/vite
> We'll skip some of the steps since they don't apply or they are done differently with Wasp.

You won't be able to use the `@` alias setup since it's not currently supported by Wasp. Because of this you'll need to adjust some imports when we generate components, but it should be fairly straightforward to do.

### 1. Enable TailwindCSS if you haven't already

> Based on: https://wasp-lang.dev/docs/project/css-frameworks#enabling-tailwind-step-by-step

Add `./tailwind.config.js`:
```js
const { resolveProjectPath } = require('wasp/dev')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}')],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

Add `./postcss.config.js`:
```js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

Run `wasp start` to make sure that npm dependencies are installed.

### 2. Temporarily set up the `@` alias (which we'll remove later)

We need to temporarily setup the `@` alias to pass the ShadCN preflight checks.

Adjust the `tsconfig.json`:

```diff
// =============================== IMPORTANT =================================
//
// This file is only used for Wasp IDE support. You can change it to configure
// your IDE checks, but none of these options will affect the TypeScript
// compiler. Proper TS compiler configuration in Wasp is coming soon :)
{
  "compilerOptions": {
    // ...
+   "baseUrl": ".",
+   "paths": {
+     "@/*": ["./src/*"]
+   }
  }
}

```

### 3. Setup ShadCN

Go into your project dir and run:
```bash
npx shadcn@latest init
```

Select the options like this:
```bash
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Neutral
✔ Would you like to use CSS variables for theming? … yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.js
✔ Updating src/Main.css
✔ Installing dependencies.
✔ Created 1 file:
  - src/lib/utils.ts
```

### 4. Remove the `@` alias 

Adjust the `tsconfig.json`:

```diff
// =============================== IMPORTANT =================================
//
// This file is only used for Wasp IDE support. You can change it to configure
// your IDE checks, but none of these options will affect the TypeScript
// compiler. Proper TS compiler configuration in Wasp is coming soon :)
{
  "compilerOptions": {
    // ...
-   "baseUrl": ".",
-   "paths": {
-     "@/*": ["./src/*"]
-   }
  }
}

```

### 5. Adjust the `components.json`
Adjust the `aliases` in `components.json` to be:
```diff
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/Main.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
-   "components": "@/components",
+   "components": "src/components",
-   "utils": "@/lib/utils",
+   "utils": "src/lib/utils",
-   "ui": "@/components/ui",
+   "ui": "src/components/ui",
-   "lib": "@/lib",
+   "lib": "src/lib",
-   "hooks": "@/hooks"
+   "hooks": "src/hooks"
  }
}
```

### 6. Let's add a new component

We'll add a button component with:
```bash
npx shadcn@latest add button
```

### 7. Adjust the `utils` import in `button.tsx` (for each component you add)

You'll notice that you now have a brand new `button.tsx` file in `src/components/ui`. We need to fix some import issues:
```diff
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

-import { cn } from "s/lib/utils"
+import { cn } from "../../lib/utils"
```

### 8. Use the `Button` component
Now you are ready to use the `Button` component. That's it!
```jsx
import './Main.css'

import { Button } from './components/ui/button'

export const MainPage = () => {
  return (
    <div className="container">
      <Button>This works</Button>
    </div>
  )
}
```