Usage

Import and render

Import the component from wherever the CLI wrote it — your configured components alias — and drop it into your JSX like you would any other React component. No providers, no context, no runtime package to register: the file in your repo is the whole component.

1// The CLI writes the file to your configured components alias.
2import { AuroraBackground } from "@/components/backgrounds/aurora-background";
3
4export default function Hero() {
5  return (
6    <section className="relative isolate overflow-hidden rounded-2xl">
7      <AuroraBackground className="absolute inset-0 -z-10" />
8      <div className="px-8 py-24 text-center">
9        <h1 className="text-4xl font-semibold tracking-tight">
10          Ship something beautiful
11        </h1>
12      </div>
13    </section>
14  );
15}

Haven't installed anything yet? See Installation for the CLI command and the copy-paste path.

Props & customization

Every component takes a classNameand a set of sensible, typed props for the things you'd actually want to change — colors, speed, size, copy. The className you pass merges with the component's own classes (via the cn helper — see Theming), so you can override layout, spacing, or color without fighting specificity or forking the file.

The exact prop list differs per component, so read the Props table on its detail page before wiring it up — it documents every prop, its type, and its default.

The component playground

Every non-block component has a detail page where you can try it before you copy it. It's a small playground, not just a static preview:

Browse to any component and open its page to try this yourself.

Accessibility & reduced motion

None of this is opt-in. Every component in the library is built with the same accessibility and motion defaults, so you don't have to remember to wire them up yourself:

• Animations collapse to near-zero under prefers-reduced-motion: reduce.
• Canvas backgrounds pause when off-screen and when the tab is hidden.
• Interactive components are keyboard-navigable with full ARIA.
• Text effects keep semantic HTML so screen readers read the real content.

So the defaults are production-safe — you can ship a component as installed and trust it behaves for every user.

Browse the library

336 components across 4 categories, each with live previews and copy-paste source.

• Backgrounds72Ambient, animated canvases to sit behind your content. GPU-friendly and they pause when off-screen.
• Text Animations58Typographic effects that draw the eye — reveals, gradients, decoding, and counters. All stay screen-reader friendly.
• Components87Interactive building blocks — cards, buttons, disclosure, tabs, toasts and more. Keyboard and reduced-motion aware.
• Section Blocks119Composed, drop-in page sections built from the primitives above — from navbar to footer.

For AI agents

Coding agents can add components for you — point them at /llms.txt or /llms-full.txt.