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 v4configured. 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 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 add ${SITE_URL}/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