1. Introduction

shadcn/ui is a collection of re-usable components built using Radix UI and Tailwind CSS. It's not a component library in the traditional sense, but rather a set of components that you can copy and paste into your projects.

2. Installation

Prerequisites:

• Node.js (version 14.6.0 or higher)
• React project (Next.js, Vite, Create React App, etc.)
  • To create a React app, open your terminal and run:

  npx create-react-app my-shadcn-project
  cd my-shadcn-project
  

To Install:

• Follow the manual installation steps from the official shadcn/ui documentation.

3. Components

shadcn/ui provides a wide range of components that you can add to your project as needed. Here are some popular ones:

Button

A versatile button component with various styles and states.

To add the Button component:

npx shadcn-ui@latest add button

Usage example:

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <Button variant="outline">Click me</Button>
  )
}

Card

A container for displaying content in a clear and concise format.

To add the Card component:

npx shadcn-ui@latest add card

Usage example:

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function Home() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card Content</p>
      </CardContent>
      <CardFooter>
        <p>Card Footer</p>
      </CardFooter>
    </Card>
  )
}

Dialog

An overlay that requires user interaction.

To add the Dialog component:

npx shadcn-ui@latest add dialog

Usage example:

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export default function Home() {
  return (
    <Dialog>
      <DialogTrigger>Open</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  )
}

4. Customization

One of the key advantages of shadcn/ui is its flexibility and customizability. You can easily modify the components to fit your project's needs:

• Styling: Use Tailwind CSS classes to adjust the appearance of components.
• Functionality: Modify the component's code directly to add or change features.
• Theming: Update the globals.css file to change the overall theme of your components.

Example of customizing a button:

<Button className="bg-purple-500 hover:bg-purple-600">
  Custom Purple Button
</Button>

6. Troubleshooting

Common issues and solutions:

• Components not styling correctly:

  • Ensure Tailwind CSS is properly configured in your project.
  • Check if the component's CSS file is imported correctly.

• TypeScript errors:

  • Make sure you have the latest types installed for React and Radix UI.
  • Verify that your tsconfig.json is correctly set up.

• Components not working as expected:

  • Check the shadcn/ui documentation for any specific requirements or props.
  • Ensure all required dependencies are installed and up-to-date.