shadcn/ui

Installing shadcn/ui

1. Install shadcn/ui

   npm

   npx shadcn@latest init

   pnpm

   pnpx shadcn@latest init

   yarn

   yarn 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"
   },

   shadcn/ui Organization

   You’ll notice that the lib directory is directly inside the app directory. You may have to manually move the folder or adjust the import paths when you start adding and using shadcn/ui components.

2. Install TailwindCSS.

3. Now, you should be able to add components: You can add components in bulk by running:

   npm

   npx shadcn@latest add

   pnpm

   pnpx shadcn@latest add

   yarn

   yarn dlx shadcn@latest add

   Or, you can add a single component by running:

   npm

   npx shadcn@latest add <COMPONENT-NAME>

   pnpm

   pnpx shadcn@latest add <COMPONENT-NAME>

   yarn

   yarn dlx shadcn@latest add <COMPONENT-NAME>

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

   • Directorysrc/

     • Directoryapp/

       • Directorycomponents/

         • Directoryui/

           • …

React Server Components

By default, all pages and components within Redwood are server components. However, most of the ShadCN components require reactivity. Therefore, you may need to add use client to the top of your component file.

lib/utils path

Even though we defined our lib/utils directory in the components.json file, as "lib": "@/app/lib", it still still install the libfolder in thesrcdirectory (or@). You'll need to manually move the folder to the app` directory.

Installing components through the shadcn/ui CLI should use the correct paths, however, if you’re copying and pasting code from the shadcn/ui website, you may need to update the import paths.

Further reading

• ShadCN
• TailwindCSS v4