1

Next.js

PreviousNext

Install and configure Ondo UI for Next.js.

Choose the setup that matches your starting point.

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

Use the CLI

Create Project

Run the Ondo init command to configure your Next.js project, install the theme, and register the Ondo registry:

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

Add Components

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

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

Existing Project

Create Project

If you need a new Next.js project, create one first. Otherwise, skip this step:

bunx --bun create-next-app@latest my-app
cd my-app

Use the recommended defaults, including TypeScript, Tailwind CSS, and the @/* import alias.

Configure Import Aliases

If the alias is not already configured, add it to tsconfig.json:

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

Run the CLI

bunx --bun shadcn@latest init

Register the Ondo Registry

Add the @ondo-ui namespace to components.json:

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

@ondo-ui/theme-provider is optional when React dark-mode switching is not used. If installed, follow the theming guide to add ThemeProvider to the application root.

Use the Component

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