1

Vite

PreviousNext

Install and configure Ondo UI for Vite.

Choose the setup that matches your starting point.

Use the CLI
Scaffold a new Vite project directly from the terminal.
Existing Project
Configure Ondo UI manually in an existing Vite project.

Use the CLI

Create Project

bunx --bun @dou.so/ondo-ui@latest init -t vite

Add Components

The command installs the Ondo theme and registers @ondo-ui. Add more components with:

bunx --bun shadcn@latest add @ondo-ui/button

Existing Project

Create Project

If you need a new Vite project, create one first:

bun create vite@latest my-app -- --template react-ts
cd my-app
npm install

Configure Tailwind CSS

Install the Tailwind Vite plugin:

bun add tailwindcss @tailwindcss/vite

Add the plugin to vite.config.ts and import Tailwind in src/index.css:

vite.config.ts
import tailwindcss from "@tailwindcss/vite"
 
export default {
  plugins: [tailwindcss()],
}
src/index.css
@import "tailwindcss";

Configure Import Aliases

Add the @/* alias to tsconfig.json and vite.config.ts if it is not already present.

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  }
}

Run the CLI

bunx --bun shadcn@latest init

Register the Ondo Registry

components.json
{
  "registries": {
    "@ondo-ui": "https://ui.ondo.dou.so/r/{name}.json"
  }
}

Add the Theme and a Component

bunx --bun shadcn@latest add @ondo-ui/theme @ondo-ui/theme-provider
npx shadcn@latest add @ondo-ui/button

Follow the theming guide when using ThemeProvider.

Use the Component

import { Button } from "@/components/ui/button"
 
export default function Example() {
  return <Button>Click me</Button>
}