React Component Kit
Documentation

Getting started

React Component Kit ships as copy-paste source, not an npm package. Add Tailwind CSS, then install components one at a time from the public registry.

1. Prerequisites

You need an existing React project with Tailwind CSS v4 configured. Every component reads the same semantic tokens defined in this site's theming guide — copy those tokens into your own globals.css so the rose accent and light/dark surfaces match.

2. Install a component

Every component page exposes a shadcn-compatible install command. Since the registry is fully public, no login, token, or payment is required — it fetches directly from this site.

npx shadcn@latest add https://rck.vibeboxph.com//r/button.json

This copies the component source and bundled lib/ helpers (utilities, icons, primitives) into your project at the paths configured in your components.json — with dependencies: [], so no extra UI npm packages are installed.

3. Don't have shadcn CLI yet?

Copy the source directly from any component page instead — there's no lock-in either way.

Terminal
npx shadcn@latest init
npx shadcn@latest add https://rck.vibeboxph.com//r/button.json

4. Use the component

app/page.tsx
import { Button } from "@/components/ui/button";

export default function Page() {
  return <Button variant="solid">Get started</Button>;
}

5. No provider required

Nothing to wrap your app in — no RCKProvider, no theme context. Every component reads CSS variables directly, and interactive state is either uncontrolled by default or fully controllable via standard value/onValueChange props.

Next steps