mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
15f639161d
- Fix 3D card component demos with proper content in both default and new-york themes - Update all 170+ CLI installation commands from 'npx hanzo-ui@latest' to 'npx @hanzo/ui@latest' - Update CLAUDE.md to reflect correct package naming - Rebuild component registry with updated demos
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 `hanzo-ui` init command to setup your project:
|
||
|
||
```bash
|
||
npx @hanzo/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 @hanzo/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>
|