A few steps. A solid start.

01 Start with your project

You'll need React 19, TypeScript, and Tailwind CSS 4. Initialize shadcn in your existing app if you haven't already.

bunx shadcn@4.23.0 init

Then install a component. The CLI includes its shared styles and dependencies.

02 Give the registry a name

Add Orchid to the registries field in your existing components.json. Keep your aliases and other configuration.

{
  "registries": {
    "@orchid": "https://ui.orchid.ai/r/{name}.json"
  }
}

bunx shadcn@4.23.0 add @orchid/z-button

Components install under your configured UI alias. With the default alias, import the button like this:

import ZButton from "@/components/ui/orchid/spectrum/atoms/z-button/z-button";

export function Example() {
  return <ZButton variant="primary">Continue</ZButton>;
}

03 Start with a little more

Install a workspace, inbox, or preferences block. Or bring in the complete kit.

The same foundation, everywhere

The shared theme includes color scales, typography, shadows, and squircle corners. It merges into the CSS file configured in components.json.

Use a dark class or data-theme="dark" on an ancestor to switch themes. Fonts use Inter when available and system fallbacks otherwise.

<html data-theme="dark">
  …
</html>

Your UI. Your behavior.

Blocks use callback props for application actions. Connect your own data, router, and services. The examples here use local state and sample data.

<OrchidWorkspace
  onSubmit={(message) => createTask(message)}
  onReviewReply={() => openDraft()}
  onAcceptInvite={() => acceptInvite()}
/>

Provider images are included as data URLs. If your app has a content security policy, allow data: images. Portable links use native anchors; the installed navigation adapter can be connected to your router.