ONONC
Installation

Installation

Add any of the 336 components two ways — the shadcn CLI or copy-paste — and both leave the code in your repo to own and edit.

Requirements

The CLI install needs a shadcn-configured project — a components.jsonat the root telling the CLI where your aliases and Tailwind config live. If you don't have one yet, create it once:

1npx shadcn@latest init

This is only needed for the CLI path — copy-paste works in any project, no components.json required. For the rest of the setup (Tailwind v4, Next.js 16, React 19), see Getting Started.

Install with the shadcn CLI (recommended)

Every component is published to a shadcn-compatible registry, so one command installs it end to end — the source file, its internal imports, ONONC's design tokens, and its npm dependencies:

1npx shadcn@latest add https://dev.ononc.com/r/aurora-background.json

Replace aurora-backgroundwith any other component's registry id. The fastest way to get the exact command for a specific component is the Copy for AI button on that component's page — it's also listed against every entry in llms.txt, which is handy if you're scripting an install or handing it to a coding agent.

What gets installed

The CLI resolves the whole dependency graph before writing anything, so a component never renders unstyled or with a missing import. A single add brings in four things:

ItemWhere it goes
The component .tsx sourceYour @/components alias
Internal imports it needs — the cn helper and any sibling componentsYour @/lib and @/components aliases
ONONC's design tokens + keyframesAppended to your globals.css (details in Theming)
npm dependencies (clsx, tailwind-merge, motion, lucide-react)Your package.json — react/react-dom/next are peers and left alone

Copy & paste

Prefer to read the code first, or working somewhere the CLI can't reach? Every component ships its real source on the site — no registry round-trip required.

  1. 1
    Open a component's page and switch to the Code tab.
  2. 2
    Copy the source into your project (e.g. components/).
  3. 3
    Set up the design tokens once so the classes resolve — see Theming.
  4. 4
    Add any packages the file imports (motion, lucide-react, clsx, tailwind-merge).

That's the whole paste flow — the token details themselves belong to Theming, not here.

Next

Once a component is installed, head to Usage to import it and start customizing.