Install

What you need

• React 19 and Tailwind CSS v4. Next.js 15 with the App Router is what every item is tested in.
• The shadcn CLI and a components.json (run npx shadcn@latest init if your project has none).

1. Add the VibeBox registry

Add the @vibebox namespace to components.json:

{
  "registries": {
    "@vibebox": "https://motion.vibeboxph.com/r/{name}.json"
  }
}

2. Add an item

npx shadcn@latest add @vibebox/launch-stack

The CLI writes:

• the component to components/vibebox/<slug>/;
• shared engine code, when the item needs it, to lib/vibebox/;
• the VibeBox tokens (the spectrum and the --vb-* values) into your global CSS, once;
• the npm packages the item uses, at the exact versions the library is tested with (for example motion and three, plus @types/three as a dev dependency).

3. Use it

import { LaunchStack } from "@/components/vibebox/launch-stack";

export default function Hero() {
  return <LaunchStack className="aspect-[4/3] w-full" label="How we build your site" />;
}

Each item page lists its props, a live playground and a "Copy config" button that writes the JSX for the options you picked.

Pro items (when Pro opens)

Pro items install the same way from the @vibebox-pro namespace, with your registry token sent as a header. Keep the token in your environment, never in the repository:

{
  "registries": {
    "@vibebox-pro": {
      "url": "https://motion.vibeboxph.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${VIBEBOX_PRO_TOKEN}" }
    }
  }
}

Updating

Run the same add command with --overwrite to take a newer version. Each item's version and changes are on its page and in the changelog. If you changed the files, review the diff before you commit.

Without the CLI

Every free item's files are on its page under Code, already rewritten for the @/ alias. Copy them into your project, install the packages listed under Dependencies, and add the tokens from the theming guide.