ONONC
For AI agents

The component library built for AI coding agents

Cursor, Claude Code, Copilot, v0, and Windsurf all work better when the library speaks their language. ONONC ships real, copy-paste source, plain React + Tailwind + Framer Motion, a predictable file structure, and a machine-readable llms.txt — so an agent can find and add a component on the first try.

Open llms.txtBrowse 308 components

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 and every internal file it imports (helpers, sibling components) into your project via the shadcn registry protocol.

  • 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.

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 plus every internal file it imports (helpers, sibling components) at your project's aliases, so there are no missing imports.

Point your agent at the docs

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

/llms.txtConcise index — every component with a description, URL, and source path./llms-full.txtFull dump — the same index plus every component's complete source inlined.

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 (and the internal files it imports). Components use ONONC's Tailwind v4 design tokens and keyframes from globals.css (@theme) — copy those into your project for exact styling.

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

Build with ONONC

Copy-paste source across 4 categories. No install, no lock-in.

Browse componentsOpen llms.txt