mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-29 23:55:02 +00:00
315 lines
6.8 KiB
Plaintext
315 lines
6.8 KiB
Plaintext
---
|
|
title: Vite
|
|
description: Install and configure shadcn/ui for Vite.
|
|
---
|
|
|
|
Choose the setup that matches your starting point.
|
|
|
|
<div className="mt-6 grid gap-4 sm:grid-cols-3 sm:gap-6">
|
|
<LinkedCard
|
|
href="#scaffold-with-create"
|
|
className="items-start gap-1 p-6 text-sm md:p-6"
|
|
>
|
|
<div className="font-medium">Use shadcn/create</div>
|
|
<div className="leading-relaxed text-muted-foreground">
|
|
Build your preset and generate a Vite project command.
|
|
</div>
|
|
</LinkedCard>
|
|
<LinkedCard
|
|
href="#scaffold-with-cli"
|
|
className="items-start gap-1 p-6 text-sm md:p-6"
|
|
>
|
|
<div className="font-medium">Use the CLI</div>
|
|
<div className="leading-relaxed text-muted-foreground">
|
|
Scaffold a new Vite project directly from the terminal.
|
|
</div>
|
|
</LinkedCard>
|
|
<LinkedCard
|
|
href="#existing-vite-project"
|
|
className="items-start gap-1 p-6 text-sm md:p-6"
|
|
>
|
|
<div className="font-medium">Existing Project</div>
|
|
<div className="leading-relaxed text-muted-foreground">
|
|
Configure shadcn/ui manually in an existing Vite project.
|
|
</div>
|
|
</LinkedCard>
|
|
</div>
|
|
|
|
<div id="scaffold-with-create" className="scroll-mt-24" />
|
|
## Use shadcn/create
|
|
|
|
<Steps>
|
|
|
|
### Build Your Preset
|
|
|
|
Open [shadcn/create](/create?template=vite) and build your preset visually. Choose your style, colors, fonts, icons, and more.
|
|
|
|
<Button asChild size="sm">
|
|
<Link
|
|
href="/create?template=vite"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-6 no-underline!"
|
|
>
|
|
Open shadcn/create
|
|
</Link>
|
|
</Button>
|
|
|
|
### Create Project
|
|
|
|
Click `Create Project`, choose your package manager, and copy the generated command.
|
|
|
|
The generated command will look similar to this:
|
|
|
|
```bash
|
|
npx shadcn@latest init --preset [CODE] --template vite
|
|
```
|
|
|
|
The exact command will include your selected options such as `--base`, `--monorepo`, or `--rtl`.
|
|
|
|
### Add Components
|
|
|
|
Add the `Card` component to your project:
|
|
|
|
```bash
|
|
npx shadcn@latest add card
|
|
```
|
|
|
|
If you created a monorepo, run the command from `apps/web` or specify the workspace from the repo root:
|
|
|
|
```bash
|
|
npx shadcn@latest add card -c apps/web
|
|
```
|
|
|
|
The command above will add the `Card` component to your project. You can then import it like this:
|
|
|
|
```tsx showLineNumbers title="src/App.tsx"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card"
|
|
|
|
function App() {
|
|
return (
|
|
<Card className="max-w-sm">
|
|
<CardHeader>
|
|
<CardTitle>Project Overview</CardTitle>
|
|
<CardDescription>
|
|
Track progress and recent activity for your Vite app.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
Your design system is ready. Start building your next component.
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default App
|
|
```
|
|
|
|
If you created a monorepo, update `apps/web/src/App.tsx` and import from `@workspace/ui/components/card` instead.
|
|
|
|
</Steps>
|
|
|
|
<div id="scaffold-with-cli" className="scroll-mt-24" />
|
|
## Use the CLI
|
|
|
|
<Steps>
|
|
|
|
### Create Project
|
|
|
|
Run the `init` command to scaffold a new Vite project. Follow the prompts to configure your project: base, preset, monorepo, and more.
|
|
|
|
```bash
|
|
npx shadcn@latest init -t vite
|
|
```
|
|
|
|
**For a monorepo project, use `--monorepo` flag:**
|
|
|
|
```bash
|
|
npx shadcn@latest init -t vite --monorepo
|
|
```
|
|
|
|
### Add Components
|
|
|
|
Add the `Card` component to your project:
|
|
|
|
```bash
|
|
npx shadcn@latest add card
|
|
```
|
|
|
|
If you created a monorepo, run the command from `apps/web` or specify the workspace from the repo root:
|
|
|
|
```bash
|
|
npx shadcn@latest add card -c apps/web
|
|
```
|
|
|
|
The command above will add the `Card` component to your project. You can then import it like this:
|
|
|
|
```tsx showLineNumbers title="src/App.tsx"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card"
|
|
|
|
function App() {
|
|
return (
|
|
<Card className="max-w-sm">
|
|
<CardHeader>
|
|
<CardTitle>Project Overview</CardTitle>
|
|
<CardDescription>
|
|
Track progress and recent activity for your Vite app.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
Your design system is ready. Start building your next component.
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default App
|
|
```
|
|
|
|
If you created a monorepo, update `apps/web/src/App.tsx` and import from `@workspace/ui/components/card` instead.
|
|
|
|
</Steps>
|
|
|
|
<div id="existing-vite-project" className="scroll-mt-24" />
|
|
## Existing Project
|
|
|
|
<Steps>
|
|
|
|
### Create Project
|
|
|
|
If you need a new Vite project, create one first and select the **React + TypeScript** template. Otherwise, skip this step.
|
|
|
|
```bash
|
|
npm create vite@latest
|
|
```
|
|
|
|
### Add Tailwind CSS
|
|
|
|
If your project already has Tailwind CSS configured, skip this step.
|
|
|
|
```bash
|
|
npm install tailwindcss @tailwindcss/vite
|
|
```
|
|
|
|
Replace everything in `src/index.css` with the following:
|
|
|
|
```css title="src/index.css"
|
|
@import "tailwindcss";
|
|
```
|
|
|
|
### Edit tsconfig.json file
|
|
|
|
If your project already has the `@/*` alias configured, skip this step.
|
|
|
|
Vite splits TypeScript configuration across multiple files. Add the `baseUrl` and `paths` properties to the `compilerOptions` section of `tsconfig.json` and `tsconfig.app.json`:
|
|
|
|
```ts title="tsconfig.json" {11-16} showLineNumbers
|
|
{
|
|
"files": [],
|
|
"references": [
|
|
{
|
|
"path": "./tsconfig.app.json"
|
|
},
|
|
{
|
|
"path": "./tsconfig.node.json"
|
|
}
|
|
],
|
|
"compilerOptions": {
|
|
"baseUrl": ".",
|
|
"paths": {
|
|
"@/*": ["./src/*"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Edit tsconfig.app.json file
|
|
|
|
Add the same alias to `tsconfig.app.json` so your editor can resolve imports:
|
|
|
|
```ts title="tsconfig.app.json" {4-9} showLineNumbers
|
|
{
|
|
"compilerOptions": {
|
|
// ...
|
|
"baseUrl": ".",
|
|
"paths": {
|
|
"@/*": [
|
|
"./src/*"
|
|
]
|
|
}
|
|
// ...
|
|
}
|
|
}
|
|
```
|
|
|
|
### Update vite.config.ts
|
|
|
|
Install `@types/node` and update `vite.config.ts` so Vite can resolve the `@` alias:
|
|
|
|
```bash
|
|
npm install -D @types/node
|
|
```
|
|
|
|
```typescript title="vite.config.ts" showLineNumbers {1,2,8-13}
|
|
import path from "path"
|
|
import tailwindcss from "@tailwindcss/vite"
|
|
import react from "@vitejs/plugin-react"
|
|
import { defineConfig } from "vite"
|
|
|
|
// https://vite.dev/config/
|
|
export default defineConfig({
|
|
plugins: [react(), tailwindcss()],
|
|
resolve: {
|
|
alias: {
|
|
"@": path.resolve(__dirname, "./src"),
|
|
},
|
|
},
|
|
})
|
|
```
|
|
|
|
### Run the CLI
|
|
|
|
Run the `shadcn` init command to set up shadcn/ui in your project:
|
|
|
|
```bash
|
|
npx shadcn@latest init
|
|
```
|
|
|
|
### Add Components
|
|
|
|
You can now start adding components to your project.
|
|
|
|
```bash
|
|
npx shadcn@latest add button
|
|
```
|
|
|
|
The command above will add the `Button` component to your project. You can then import it like this:
|
|
|
|
```tsx showLineNumbers title="src/App.tsx"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
function App() {
|
|
return (
|
|
<div className="flex min-h-svh flex-col items-center justify-center">
|
|
<Button>Click me</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|
|
```
|
|
|
|
</Steps>
|