Vite Installation

Complete setup guide for integrating DinachiUI with Vite projects for fast development and optimized builds.

Create Vite Project

Start with a new Vite project or use an existing one

Create new React + TypeScript project:

bash

1npm create vite@latest my-app -- --template react-ts

Or create JavaScript project:

bash

1npm create vite@latest my-app -- --template react

Navigate to project and install dependencies:

bash

1cd my-app && npm install

Note: You can also run npm create vite@latest without arguments for an interactive prompt to choose your framework and variant.

Install Tailwind CSS

Set up Tailwind CSS if not already configured

Install Tailwind CSS:

bash

1npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind:

bash

1npx tailwindcss init -p

Update tailwind.config.js:

javascript

1/** @type {import('tailwindcss').Config} */
2export default {
3  content: [
4    "./index.html",
5    "./src/**/*.{js,ts,jsx,tsx}",
6  ],
7  theme: {
8    extend: {},
9  },
10  plugins: [],
11}

Add Tailwind directives to src/index.css:

css

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Initialize DinachiUI

Set up DinachiUI configuration and install dependencies

Initialize DinachiUI:

bash

1npx @dinachi/cli@latest init

What this does: Creates a components.json config file with Vite-specific settings:

• Sets up path aliases for components and utils
• Configures Tailwind config path as tailwind.config.js
• Points CSS to src/index.css
• Installs required dependencies (clsx, tailwind-merge, etc.)

Configure Path Aliases

Set up TypeScript path aliases for better imports

Update vite.config.ts:

typescript

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

Update tsconfig.json (if using TypeScript):

json

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "useDefineForClassFields": true,
5    "lib": ["ES2020", "DOM", "DOM.Iterable"],
6    "module": "ESNext",
7    "skipLibCheck": true,
8    "moduleResolution": "bundler",
9    "allowImportingTsExtensions": true,
10    "resolveJsonModule": true,
11    "isolatedModules": true,
12    "noEmit": true,
13    "jsx": "react-jsx",
14    "strict": true,
15    "noUnusedLocals": true,
16    "noUnusedParameters": true,
17    "noFallthroughCasesInSwitch": true,
18    "baseUrl": ".",
19    "paths": {
20      "@/*": ["./src/*"]
21    }
22  },
23  "include": ["src"],
24  "references": [{ "path": "./tsconfig.node.json" }]
25}

Add Components

Install the components you need for your project

Add individual components:

bash

1npx @dinachi/cli@latest add button input card

Or add all components:

bash

1npx @dinachi/cli@latest add --all

Start Using Components

Import and use DinachiUI components in your Vite app

Update src/App.tsx:

typescript

1import { useState } from 'react'
2import { Button } from '@/components/ui/button'
3import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
4
5function App() {
6  const [count, setCount] = useState(0)
7
8  return (
9    <div className="container mx-auto p-8">
10      <Card className="max-w-md mx-auto">
11        <CardHeader>
12          <CardTitle>DinachiUI + Vite</CardTitle>
13        </CardHeader>
14        <CardContent className="space-y-4">
15          <Button onClick={() => setCount(count + 1)}>
16            Count: {count}
17          </Button>
18        </CardContent>
19      </Card>
20    </div>
21  )
22}
23
24export default App

Start the development server:

bash

1npm run dev