Using ShadCN with Wasp 0.12+

0-README.md

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.

We'll skip 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.cjs:

const { resolveProjectPath } = require('wasp/dev')

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

Add ./postcss.config.cjs:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

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

2. Setup ShadCN

Go into your project dir and run:

npx shadcn-ui@latest init

Select the options like this:

✔ Would you like to use TypeScript (recommended)? … yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … ./src/Main.css
✔ Would you like to use CSS variables for colors? … yes
✔ Are you using a custom tailwind prefix eg. tw-?
✔ Where is your tailwind.config.js located? … tailwind.config.cjs
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no
✔ Write configuration to components.json. Proceed? … yes

3. Adjust the tailwind.config.cjs

Import the resolveProjectPath helper and adjust the content:

+const { resolveProjectPath } = require('wasp/dev')

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
-   './pages/**/*.{ts,tsx}',
-   './components/**/*.{ts,tsx}',
-   './app/**/*.{ts,tsx}',
-   './src/**/*.{ts,tsx}',
+   resolveProjectPath('./src/**/*.{ts,tsx}'),
  ],

4. Adjust the components.json

Adjust the aliases in components.json to be:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.cjs",
    "css": "./src/Main.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
-    "components": "@/components",
-   "utils": "@/lib/utils"
+   "components": "src/components",
+   "utils": "src/lib/utils"
  }
}

5. Move the @ folder from root to ./src

Let's move the components and utils from the @ folder to the src dir.

It should look like this:

src
├── Main.css
├── MainPage.jsx
├── components
├── lib
│   └── utils.ts
├── vite-env.d.ts
└── waspLogo.png

6. Let's add a new component

We'll add a button component with:

npx shadcn-ui@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:

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

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

8. Use the Button component

Now you are ready to use the Button component. That's it!

import './Main.css'

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

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

Thanks