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.

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.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. 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:

// =============================== 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:

npx shadcn@latest init

Select the options like this:

✔ 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.cjs
✔ Updating src/Main.css
✔ Installing dependencies.
✔ Created 1 file:
  - src/lib/utils.ts

4. Remove the @ alias

Adjust the tsconfig.json:

// =============================== 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:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.cjs",
    "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:

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:

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!

import './Main.css'

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

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