The component library built for AI coding agents

Why ONONC works well with agents

• Real source, not a black box

  Every component's actual .tsx lives on its page and in llms-full.txt. Your agent reads, greps, and edits it like any other file in your repo.

• One-command install

  npx shadcn@latest add https://dev.ononc.com/r/<id>.json drops the component, every internal file it imports (helpers, sibling components), and ONONC's design tokens into your project via the shadcn registry protocol — so it renders correctly with no extra setup.

• Plain React + Tailwind + Framer Motion

  No bespoke DSL, no wrapper, no proprietary primitives — idiomatic code the agent already knows how to extend.

• Predictable structure

  Consistent naming and file layout across the registry, so the agent's pattern-matching works on the first try.

• A machine-readable index

  llms.txt lists every component with a description, URL, and source path; llms-full.txt inlines all of it in a single fetch.

• No install, no lock-in

  Copy what you need. There is no runtime package or version for the agent to reason about — what is in your repo is what runs.

• Reduced-motion & a11y by default

  Motion degrades under prefers-reduced-motion, canvases pause off-screen, and interactive parts stay keyboard-navigable.

Original work, honest about its lineage

ONONC is not a reskin. It shares no code with — and takes no dependency on — the projects that inspired it, which is also why an agent can read and own it so easily. What it gratefully borrows:

• shadcn/ui

  the copy-paste registry protocol our /r/<id>.json install targets — an open standard any project can implement, not a dependency we pull in.

• React Bits · Aceternity · Magic UI

  the motion-component lineage that inspired many background, text, and interactive concepts and names.

How ONONC differs

• No Radix, no UI dependencies — every interactive primitive (accordion, tabs, switch, modal, …) is implemented from scratch with its own ARIA, keyboard, and focus handling.
• Motion-first: a shared canvas lifecycle (off-screen pause, DPR cap) and Framer Motion polish across the whole library.
• Accessible and reduced-motion aware by default — including the eye-candy components.
• One dark-first design-token system spanning backgrounds, text, components, and blocks.
• Independently implemented — no source is vendored or copied from the projects above.

A full component-level breakdown lives in docs/originality-audit.md, and the libraries we recommend are on Resources.

How an agent uses it

1. 1Point the agent at the docs — e.g. "Read https://dev.ononc.com/llms.txt".
2. 2It picks the right component by name and description from the index.
3. 3It installs with one command — npx shadcn@latest add https://dev.ononc.com/r/<id>.json — or copies the source straight from the component's page.
4. 4The install bundles the component, every internal file it imports (helpers, sibling components), and ONONC's design tokens + keyframes at your project's aliases and globals.css — so there are no missing imports and nothing renders unstyled.

Point your agent at the docs

Two plain-text endpoints describe the whole library. Give either URL to your agent.

Example prompt

Read https://dev.ononc.com/llms.txt for the full ONONC component list.
Add the "Aurora" background to my hero — install it with the shadcn CLI:
npx shadcn@latest add https://dev.ononc.com/r/aurora-background.json
Then wire it into the page and keep the prefers-reduced-motion handling intact.

The install brings the component's .tsxsource, the internal files it imports, and ONONC's Tailwind v4 design tokens + keyframes (written into your globals.css) — so it renders correctly with no extra setup. To set up the tokens on their own first, run npx shadcn@latest add https://dev.ononc.com/r/ononc-theme.json.

Works with your agent

The contract is plain text and copy-paste, so any agent that can read a URL and edit files works — nothing to install, nothing agent-specific to maintain.

• Cursor
• Claude Code
• GitHub Copilot
• v0
• Windsurf
• Bolt.new
• Lovable
• Replit
• Kiro