Installation

Choose the setup that matches your starting point.

Use the CLI#

Use the Ondo CLI to scaffold a new project, configure the registry, and install the initial theme directly from the terminal. See the CLI reference for the complete command list:

Copybunx --bun @dou.so/ondo-ui@latest init -t [framework]

Supported templates: next, vite, start, react-router, and astro.

For Laravel, create the app first with laravel new, then run bunx --bun @dou.so/ondo-ui@latest init -t laravel from the app directory.

Existing Project#

Each framework guide includes an Existing Project section with the manual setup steps for that framework.

Pick your framework below and follow that path.

Choose Your Framework#

For Laravel, start with laravel new before using bunx --bun @dou.so/ondo-ui@latest init.

Prerequisites#

ondo-ui components assume a project set up with the shadcn CLI — Tailwind CSS v4, a components.json, and the cn() utility. If you are starting fresh, choose a framework above to initialize the project first.

Add the theme#

The Ondo CLI installs the framework-compatible theme automatically. It also adds the @ondo-ui namespace to components.json.

Add components#

Use the Ondo CLI to browse Components and Compositions in a grouped menu:

Copybunx --bun @dou.so/ondo-ui add

You can also install items directly, preview changes, or install every menu-visible item:

Copybunx --bun @dou.so/ondo-ui add button empty-view
bunx --bun @dou.so/ondo-ui add button --dry-run
bunx --bun @dou.so/ondo-ui add --all
bunx --bun @dou.so/ondo-ui add -a

init replaces template stock components (such as the starter button.tsx) with their @ondo-ui counterparts automatically — mixing the two breaks typechecking. If a project was initialized with an older CLI and typechecking fails around a stock component, reinstall it once with --overwrite:

Copybunx --bun @dou.so/ondo-ui add button --overwrite

Compositions such as empty-view and number-badge are shown separately from registry UI components. Dependencies such as utils are resolved automatically.

Use the official shadcn command directly when preferred:

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

Then import it from your project:

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

The Ondo CLI supports the full shadcn command surface: search (list alias), view, docs, diff (translated to add --diff), apply, info, migrate, eject, mcp, preset, build, and registry. Use --cwd <path> to target another project. See the CLI reference for the full command reference and examples.