Black Friday · Save 40% on Intent UI Design licenses with code UI2026.

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

Add the Tailwind CSS plugin to vite.config.ts:

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

Configure the import alias in tsconfig.json:

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

Install Intent UI

Initialize Intent UI in your project:

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 frameworks

For another framework, choose a setup guide below.

LaravelLaravel is a PHP framework for building web applications.
Next.jsNext.js is a React framework for building server-side rendered applications.
ViteVite is a tool for building frontend applications in a fraction of the time.
TanStack RouterTanStack Router is a framework for building server-side rendered applications.
Design
TanStack Router