1

Astro

PreviousNext

Install and configure Ondo UI for Astro.

Choose the setup that matches your starting point.

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

Use the CLI

Create Project

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

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

Add Components

Astro projects need the React integration before rendering Ondo React components. The command installs the Ondo theme and registers @ondo-ui; add components with:

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

Existing Project

Create Project

If you need a new Astro project, use the Tailwind and React integrations:

bun create astro@latest astro-app -- --template with-tailwindcss --install --add react --git

Configure Import Aliases

If @/* is not configured, add it to tsconfig.json:

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"
---
 
<Button>Click me</Button>