Skip to content
RedwoodSDK
4th April 2025: This is a preview, whilst production-ready, it means some APIs might change

shadcn/ui

Installing shadcn/ui

  1. Install shadcn/ui

    Terminal window
    pnpm dlx shadcn@latest init

    It will ask you what theme you want to use.

    This command will create a components.json file in the root of your project. It contains all the configuration for our shadcn/ui components.

    If you want to modify the default paths so that it will put our components in the src/app/components/ui folder.

    components.json
    ...
    "aliases": {
      "components": "@/app/components",
      "utils": "@/app/lib/utils",
      "ui": "@/app/components/ui",
      "lib": "@/app/lib",
      "hooks": "@/app/hooks"
    },

  2. Install TailwindCSS.

  3. Add baseUrl to your tsconfig.json:

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

  4. Add resolve alias config to 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. Now, you should be able to add components: You can add components in bulk by running:

    Terminal window
    pnpm dlx shadcn@latest add

    Or, you can add a single component by running:

    Terminal window
    pnpm dlx shadcn@latest add <COMPONENT-NAME>

    Components will be added to the src/components/ui folder.

    • Directorysrc/
      • Directoryapp/
        • Directorycomponents/
          • Directoryui/
            • …

Further reading