Vite Installation

Install and configure your UI components for Vite.

Create project

Start by creating a new React project using vite. Select the React + TypeScript template:

pnpm create vite@latest

Add Tailwind CSS

pnpm add tailwindcss @tailwindcss/vite

Replace everything in src/index.css with:

1@import "tailwindcss";

Edit tsconfig.json

Add baseUrl and paths to compilerOptions:

1{
2  "files": [],
3  "references": [
4    { "path": "./tsconfig.app.json" },
5    { "path": "./tsconfig.node.json" }
6  ],
7  "compilerOptions": {
8    "baseUrl": ".",
9    "paths": {
10      "@/*": ["./src/*"]
11    }
12  }
13}

Edit tsconfig.app.json

Add the following for IDE path resolution:

1{
2  "compilerOptions": {
3    // ...
4    "baseUrl": ".",
5    "paths": {
6      "@/*": ["./src/*"]
7    }
8    // ...
9  }
10}

Update vite.config.ts

Add the following to resolve paths and plugins:

pnpm add -D @types/node

1import path from "path";
2import tailwindcss from "@tailwindcss/vite";
3import react from "@vitejs/plugin-react";
4import { defineConfig } from "vite";
5
6// https://vite.dev/config/
7export default defineConfig({
8  plugins: [react(), tailwindcss()],
9  resolve: {
10    alias: {
11      "@": path.resolve(__dirname, "./src"),
12    },
13  },
14});

Run the CLI

Run the shadcn init command to setup your project:

pnpm dlx shadcn@latest init

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

Add Components

You can now start adding components to your project. For example, to add the Button component:

pnpm dlx shadcn@latest add button

The command above will add the Button component to your project. You can then import and use it like this:

1import { Button } from "@/components/ui/button";
2
3function App() {
4  return (
5    <div className="flex min-h-svh flex-col items-center justify-center">
6      <Button>Click me</Button>
7    </div>
8  );
9}
10
11export default App;

For more details, see the documentation for each component.