Vite Installation

Set up DinachiUI in a Vite + React project with TypeScript and Tailwind CSS.

Create Vite Project

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

cd my-app && npm install

Install Tailwind CSS

npm install tailwindcss @tailwindcss/vite

Add the plugin to vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
 
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

Replace the contents of src/index.css with:

css

@import "tailwindcss";

Configure Path Aliases

Update vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'
 
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

The init command in the next step adds the @/* mapping to your tsconfig.app.json automatically.

Initialize DinachiUI

npx @dinachi/cli@latest init

This creates components.json, injects the color theme into your CSS, and installs base dependencies.

Add Components

npx @dinachi/cli@latest add button input card

Or install everything:

npx @dinachi/cli@latest add --all

Start Building

tsx

import { useState } from 'react'
import { Button } from '@/components/ui/button'
 
function App() {
  const [count, setCount] = useState(0)
 
  return (
    <Button onClick={() => setCount(count + 1)}>
      Count: {count}
    </Button>
  )
}
 
export default App

npm run dev