mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-29 23:55:02 +00:00
9091dcdc1b
This is a small update to the installation instructions for some of the frameworks to make the instructions on editing the tsconfig file consistant across the frameworks, and remove some potentially confusing wording (if people read too fast...like me). Mainly applying the gatsby tsconfig instructions to vite and astro, as it is the most clear. Additionally changed the wording from: ``` Add the code below to the compilerOptions... ``` to: ``` Add the following code to the compilerOptions... ``` to avoid people easily misreading it as "add the code **below the** compilerOptions".
116 lines
2.3 KiB
Plaintext
116 lines
2.3 KiB
Plaintext
---
|
||
title: Vite
|
||
description: Install and configure Vite.
|
||
---
|
||
|
||
<Steps>
|
||
|
||
### Create project
|
||
|
||
Start by creating a new React project using `vite`:
|
||
|
||
```bash
|
||
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:
|
||
|
||
```bash
|
||
npm install -D tailwindcss postcss autoprefixer
|
||
|
||
npx tailwindcss init -p
|
||
```
|
||
|
||
### Edit tsconfig.json file
|
||
|
||
Add the following code to the `tsconfig.json` file to resolve paths:
|
||
|
||
```ts {4-9} showLineNumbers
|
||
{
|
||
"compilerOptions": {
|
||
// ...
|
||
"baseUrl": ".",
|
||
"paths": {
|
||
"@/*": [
|
||
"./src/*"
|
||
]
|
||
}
|
||
// ...
|
||
}
|
||
}
|
||
```
|
||
|
||
### Update vite.config.ts
|
||
|
||
Add the following code to the vite.config.ts so your app can resolve paths without error
|
||
|
||
```bash
|
||
# (so you can import "path" without error)
|
||
npm i -D @types/node
|
||
```
|
||
|
||
```typescript
|
||
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"),
|
||
},
|
||
},
|
||
})
|
||
```
|
||
|
||
### Run the CLI
|
||
|
||
Run the `shadcn-ui` init command to setup your project:
|
||
|
||
```bash
|
||
npx shadcn-ui@latest init
|
||
```
|
||
|
||
### Configure components.json
|
||
|
||
You will be asked a few questions to configure `components.json`:
|
||
|
||
```txt showLineNumbers
|
||
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? › › 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: › @/components
|
||
Configure the import alias for utils: › @/lib/utils
|
||
Are you using React Server Components? › no / yes (no)
|
||
```
|
||
|
||
### That's it
|
||
|
||
You can now start adding components to your project.
|
||
|
||
```bash
|
||
npx shadcn-ui@latest add button
|
||
```
|
||
|
||
The command above will add the `Button` component to your project. You can then import it like this:
|
||
|
||
```tsx {1,6} showLineNumbers
|
||
import { Button } from "@/components/ui/button"
|
||
|
||
export default function Home() {
|
||
return (
|
||
<div>
|
||
<Button>Click me</Button>
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
</Steps>
|