Ondo UI

한국어

Ondo UI is an open-source design system with a warm, trustworthy mood. It's built so everyone — from the youngest users to the oldest — can reach for it comfortably and with confidence, never finding it unfamiliar or heavy. Designed for both desktop and mobile, it ships components, tokens, and themes as a shadcn registry, so design and code always share one source.

Who uses it

Designers build screens on top of Ondo UI's components and tokens; developers install those same registry components through the shadcn MCP and implement the design as-is. The two don't build separate things — they stay aligned on a single source.

Where it fits

Ondo UI isn't tied to any one domain. It suits any product used across a wide range of ages, or wherever comfort and trust matter most. Where clarity beats flash and ease beats complexity — on web or app alike — it carries one consistent mood.

Why Ondo

"Ondo" means temperature — the work of keeping every product's mood at one steady warmth. Tokens as °C, light and dark as Warm and Cool: one brand, felt as a single temperature.

Workflow

Ondo UI sits at the center of a design–development loop. Both the design team and the dev team access the same registry through the shadcn MCP: the design team designs product screens on top of Ondo UI's components and tokens, and the dev team implements those designs with the exact same registry components — so design and code always share a single source of truth.

flowchart TD
    classDef default fill:#4a90d9,stroke:#6ab0ff,color:#fff

    subgraph ondo["🌡️ Ondo UI"]
        registry["Component & Theme Registry<br/>registry.json"]
    end

    mcp["🔌 shadcn MCP"]

    subgraph design["🎨 Design Team"]
        mockup["Product Screen Design"]
    end

    subgraph dev["🛠️ Dev Team"]
        add["Browse & install components<br/>(ondo-ui add)"] --> product["Product Implementation"]
    end

    registry -->|"components & tokens"| mcp
    mcp --> mockup
    mcp --> add
    mockup -->|"design handoff"| add
    design -.->|"new components & improvement proposals"| ondo

Loading

1. Ondo UI publishes components, themes, and tokens as a shadcn registry.
2. Both the design team and the dev team access the same registry through the shadcn MCP.
3. The design team designs product screens on top of Ondo UI components and hands them off to the dev team.
4. The dev team browses components via the MCP or ondo-ui add and installs them to implement the designs.
5. New components and improvements proposed during design flow back into Ondo UI, and the loop repeats.

Setting up the shadcn MCP

Two steps make the Ondo UI registry available to AI tools (Claude Code, Cursor, etc.).

1. Register the registry — add the @ondo-ui namespace to your project's components.json:

{
  "registries": {
    "@ondo-ui": "https://ui.ondo.dou.so/r/{name}.json"
  }
}

2. Register the MCP server — run the command for your client:

bunx --bun @dou.so/ondo-ui@latest mcp init --client claude   # Claude Code
bunx --bun @dou.so/ondo-ui@latest mcp init --client cursor   # Cursor
bunx --bun @dou.so/ondo-ui@latest mcp init --client vscode   # VS Code

Once configured, just ask your AI in natural language:

• "Show me the components in the @ondo-ui registry"
• "Add @ondo-ui button and card to this page"

See the installation docs for details.

Ondo CLI

Use the Ondo CLI to initialize a supported framework, configure the registry, and install Components or Compositions:

bunx --bun @dou.so/ondo-ui@latest init -t astro
bunx --bun @dou.so/ondo-ui@latest add
bunx --bun @dou.so/ondo-ui@latest add button empty-view
bunx --bun @dou.so/ondo-ui@latest add --all
bunx --bun @dou.so/ondo-ui@latest docs button
bunx --bun @dou.so/ondo-ui@latest docs empty-view --json

The CLI also exposes the shadcn project and registry commands, including search, list, view, docs, diff, apply, info, migrate, eject, mcp, preset, build, and registry. See the CLI reference for command options, Compositions, system items, and --cwd usage.

Ondo UI Skill

Install the repository-hosted Skill to give AI assistants Ondo project context, Base UI patterns, and component and Composition rules:

npx skills add douinc/ondo-ui

The Skill is installed from GitHub rather than the npm CLI package. See the Skills guide for included knowledge and example prompts.

Adding components

To add components to your app, run the following command:

bunx --bun @dou.so/ondo-ui@latest add button

This will place the ui components in the components directory.

Using components

To use the components in your app, import them as follows:

import { Button } from "@/components/ui/button";

Contributors