1

Manual Installation

PreviousNext

Add Ondo UI to an existing project manually.

Choose this path when your project does not use one of the supported templates. Your project needs Tailwind CSS v4, a components.json file, and the shadcn cn() utility.

Use the CLI
Configure shadcn and Ondo UI in an existing project.
Configure Manually
Add the required styles, aliases, and registry by hand.

Use the CLI

Run the CLI

Run the initialization command from the project root:

bunx --bun shadcn@latest init

Make sure the generated components.json points to your existing CSS file and component aliases.

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 to add ThemeProvider when dark-mode switching is needed.

Configure Manually

Add Tailwind CSS

Install and configure Tailwind CSS with your framework's recommended integration.

Add Dependencies

bun add shadcn class-variance-authority clsx tailwind-merge tw-animate-css

Configure Import Aliases

Configure an alias for components and utilities. For TypeScript projects, @/* can point to your source directory:

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

Configure Styles

Your global stylesheet must include Tailwind and the Ondo theme. The theme command below adds the base CSS variables and fonts:

src/styles/globals.css
@import "tailwindcss";

Create components.json

Run npx shadcn@latest init once to generate the file, then add the Ondo registry namespace shown above. Ensure its CSS and alias paths match your project.

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

Use the Component

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