ONONC
Getting Started

Getting Started

ONONC is a motion-first React component library — 336 components across 4 categories, built from scratch with no package to depend on. This page explains how it works and what you need; the guides that follow take you from an empty project to a component on the page.

How ONONC works

ONONC is not an npm package you install and import. Every component is real source code you bring into your project — with the shadcn CLI or by copying it from the site — after which the file lives in your repo. Getting productive is three short steps: install a component, set up the tokens, then use it.

  • Real source, in your repo

    Adding a component drops its actual .tsx into your project. You read it, edit it, and own it — there is no black box and no version to upgrade.

  • No lock-in

    Because it is just your code, you can change anything. Nothing is package-locked, so teammates and AI agents extend it like any other file.

  • Motion-first & accessible

    Every component is built from scratch with keyboard support and prefers-reduced-motion handling — the eye-candy is accessible too.

Prerequisites

ONONC components are idiomatic React + Tailwind — no bespoke runtime and no UI-kit dependency. You need:

RequirementNotes
React 19Components are plain .tsx files, so any React 19 app works. Next.js (App Router) is what ONONC is built and tested on.
Tailwind CSS v4Styling uses Tailwind v4 utilities and CSS-first @theme tokens. Set the tokens up once — see Theming.
A shadcn setupThe one-command install uses the shadcn CLI, which needs a components.json (run npx shadcn@latest init once). Not required if you copy-paste instead.
A few peer packagesmotion (Framer Motion) for animation, lucide-react for icons, and clsx + tailwind-merge for the cn helper. The CLI installs these for you.

Next steps

Three short guides take you from an empty project to a component on the page: