shadcn/ui

Installing shadcn/ui

1. Install TailwindCSS.

2. 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 match RedwoodSDK conventions, add the following aliases to the components.json file:

   components.json

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

   shadcn/ui Organization

   In our configuration, the lib directory is nested inside the app directory. The shadcn/ui command line tool may not honor our setup, creating another lib directory in the src (or @) directory. You’ll need to manually move the folder to the app directory.

   If you’re copying and pasting code from the shadcn/ui website, you’ll also need to update the import paths.

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/app/components/ui folder.

   • Directorysrc/

     • Directoryapp/

       • Directorycomponents/

         • Directoryui/

           • …

Toaster (sonner)

By default, the shadcn Toaster (from sonner) might not work if added directly to the Document because it needs to be client-side and properly encapsulated within the route tree where toasts are triggered.

To make it work:

1. Create a “Client Component” for the Toaster.
2. Create a Layout that encapsulates your routes.
3. Render the Toaster within that Layout.

src/app/components/toaster.tsx

"use client";

import { Toaster as Sonner } from "@/app/components/ui/sonner";

export function Toaster() {
  return <Sonner />;
}

src/app/layouts/main-layout.tsx

import { Toaster } from "@/app/components/Toaster";

export function MainLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  );
}

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.

Further reading

• ShadCN
• TailwindCSS v4