Vite

Installation

Start a new project with the following command:

npx npm create vite@latest

Next, install Tailwind CSS along with the Tailwind CSS Vite plugin:

npm install tailwindcss @tailwindcss/vite

Vite.config.ts

Now, open your vite.config.ts file and add the following to the plugins array:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    tailwindcss(),
    react()
  ],
})

Tsconfig.json

To ensure proper path resolution, update your tsconfig.json file with the following paths:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Install Intent UI

After you set up all the necessary configurations, you can install Intent UI by running the following command:

npx shadcn@latest init @intentui/theme-default

Adding components

Add Intent UI components to your project with the following command:

npx shadcn@latest add @intentui/text-field @intentui/button @intentui/menu

Other framework

You might be interested in using Intent with other frameworks.