Shadcn UI frameworks and libraries as a helpful resource for developers, who looking for an open-source, customizable way to create stunning and useful user interfaces. Shadcn is a tool to help build your component. These are components that you can copy and paste into your Applications.

Shadcn provides beautiful UI components that can be added to your app as code and you can customize it


How to install shadcn in a React project?

Start by creating a new React project using vite:

npm create vite@latest shadcn-app -- --template react-ts


or if you're using yarn:

yarn create vite shadcn-app --template react-ts


Now enter into the app by running:

cd shadcn-app


TypeScript

This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.


However, we provide a JavaScript version of the components as well. The JavaScript version is available via the CLI.

To opt out of TypeScript, you can use the tsx flag in your components.json file.



components.json

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "rsc": false,
  "tsx": false,
  "aliases": {
    "utils": "~/lib/utils",
    "components": "~/components"
  }
}


To configure import aliases, you can use the following jsconfig.json:

jsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}



Install all the dependencies by running:

Install all the dependencies by running:


or if you're using yarn:

yarn



Install tailwindcss and it's dependencies, then generate your tailwind.config.js and postcss.config.js files:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p



Now run the following so you can import "path" without error:

npm i -D @types/node


Add the following to vite.config.ts so your app can resolve paths without error:

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})



Now run the shadcn-ui init command to setup the project:

npx shadcn-ui@latest init



or if you're using yarn:

npx shadcn-ui@latest init


After running this you'll be prompted with a few questions, you can answer them according to your preferences. You will be asked a few questions to configure components.json:

  • Would you like to use TypeScript (recommended)? no/yes
  • Which style would you like to use? › Default
  • Which color would you like to use as base color? › Slate
  • Where is your global CSS file? › › app/globals.css
  • Do you want to use CSS variables for colors? › no / yes
  • Where is your tailwind.config.js located? › tailwind.config.js
  • Configure the import alias for components: › @/components
  • Configure the import alias for utils: › @/lib/utils
  • Are you using React Server Components? › no / yes



Massive list of components available

There is a massive list of components we can add that shadcn provides us, you can find the list here. Starting from Accordion all the way to tooltips we have almost all components used in projects with a great design.



To add a button component let's run:

npx shadcn-ui@latest add button


or if you're using yarn:

npx shadcn-ui@latest add button



To add the alert dialog component run:

npx shadcn-ui@latest add alert-dialog



of if you're using yarn:

npx shadcn-ui@latest add alert-dialog



Change the App.tsx to this:

import { useState } from "react";
import "./App.css";
import { Button } from "@/components/ui/button";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>Vite + React</h1>
      <div className="card">
        <Button onClick={() => setCount((count) => count + 1)}>
          Button Component to set count: {count}
        </Button>
      </div>
      <AlertDialog>
        <AlertDialogTrigger><Button>Open Dialog</Button></AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Something here?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This action is harmful.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}

export default App;



You should see something like this: 




Here we're using a shadcn button to control the alert, as well as using the button to increase the count state.