163 lines
2.7 KiB
Plaintext
163 lines
2.7 KiB
Plaintext
---
|
||
title: Vite
|
||
description: Install and configure shadcn/ui for Vite.
|
||
---
|
||
|
||
<Callout type="info">
|
||
**Note:** The following guide is for Tailwind v4. If you are using Tailwind
|
||
v3, use `shadcn@2.3.0`.
|
||
</Callout>
|
||
|
||
<Steps>
|
||
|
||
<Step>
|
||
### Create project
|
||
|
||
Start by creating a new React project using `vite`. Select the **React + TypeScript** template:
|
||
|
||
```bash
|
||
npm create vite@latest
|
||
```
|
||
|
||
</Step>
|
||
|
||
<Step>
|
||
### Add Tailwind CSS
|
||
|
||
```bash
|
||
npm install tailwindcss @tailwindcss/vite
|
||
```
|
||
|
||
Replace everything in `src/index.css` with the following:
|
||
|
||
```css title="src/index.css"
|
||
@import 'tailwindcss';
|
||
```
|
||
|
||
</Step>
|
||
|
||
<Step>
|
||
### Edit tsconfig.json file
|
||
|
||
The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.
|
||
Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json` and
|
||
`tsconfig.app.json` files:
|
||
|
||
```ts {11-16} showLineNumbers
|
||
{
|
||
"files": [],
|
||
"references": [
|
||
{
|
||
"path": "./tsconfig.app.json"
|
||
},
|
||
{
|
||
"path": "./tsconfig.node.json"
|
||
}
|
||
],
|
||
"compilerOptions": {
|
||
"baseUrl": ".",
|
||
"paths": {
|
||
"@/*": ["./src/*"]
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
</Step>
|
||
|
||
<Step>
|
||
### Edit tsconfig.app.json file
|
||
|
||
Add the following code to the `tsconfig.app.json` file to resolve paths, for your IDE:
|
||
|
||
```ts {4-9} showLineNumbers
|
||
{
|
||
"compilerOptions": {
|
||
// ...
|
||
"baseUrl": ".",
|
||
"paths": {
|
||
"@/*": [
|
||
"./src/*"
|
||
]
|
||
}
|
||
// ...
|
||
}
|
||
}
|
||
```
|
||
|
||
</Step>
|
||
|
||
<Step>
|
||
### Update vite.config.ts
|
||
|
||
Add the following code to the vite.config.ts so your app can resolve paths without error:
|
||
|
||
```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'),
|
||
},
|
||
},
|
||
});
|
||
```
|
||
|
||
</Step>
|
||
|
||
<Step>
|
||
### Run the CLI
|
||
|
||
Run the `shadcn` init command to setup your project:
|
||
|
||
```bash
|
||
npx shadcn@latest init
|
||
```
|
||
|
||
You will be asked a few questions to configure `components.json`.
|
||
|
||
```txt
|
||
Which color would you like to use as base color? › Neutral
|
||
```
|
||
|
||
</Step>
|
||
|
||
<Step>
|
||
### 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 flex-col items-center justify-center min-h-svh">
|
||
<Button>Click me</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default App;
|
||
```
|
||
|
||
</Step>
|
||
|
||
</Steps>
|