Docs
Installation

Installation

How to install dependencies and structure your app.

React with Vite

Create project

Start by creating a new React project using vite:

npm create vite@latest

Add Tailwind and its configuration

Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:

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

Run the CLI

Run the shadcn-ui init command to setup your project:

npx shadcn-ui@latest init

Configure components.json

You will be asked a few questions to configure components.json:

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? › › src/index.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: › src/components
Configure the import alias for utils: › src/lib/utils
Are you using React Server Components? › no / yes (no)

Edit tsconfig.json

Add the code below to the compilerOptions of your tsconfig.json so components can import utils without error

"baseUrl": ".",

Update vite.config.ts

Add the code below to the vite.config.ts so components can import utils without error

# (so you can import "path" without error)
npm i -D @types/node
import react from "@vitejs/plugin-react";
import path from "path";
import { defineConfig } from "vite";
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "src", replacement: path.resolve(__dirname, "./src/") },
],
  },
});

That's it. You can now start adding components to your project.

npx shadcn-ui@latest add

Other frameworks

I'm looking for help writing guides for other frameworks. Help me write guides for Remix and Astro by opening an PR.

InstallationTheming