1

React Router

PreviousNext

Install and configure Ondo UI for React Router.

Choose the setup that matches your starting point.

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

Use the CLI

Create Project

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

For a monorepo, add --monorepo to the command.

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 React Router project, create one first:

bun create react-router@latest

The starter configures Tailwind CSS and the default ~/* import alias. Keep both configured in custom projects.

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 for ThemeProvider setup.

Use the Component

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