Get started with Bounce Kit

1. Initialize your project

Run the init command to set up Bounce Kit in your existing Next.js project. This creates a bouncekit.json config file.

npx bouncekit@latest init

2. Install a component

Add any component from the registry. Free components install immediately. Pro components require a license key in your .env file.

npx bouncekit@latest add button

3. Set up your license (Pro)

After purchasing, you'll receive a license key via email. Add it to your project's .env file to unlock Pro components.

LICENSE_KEY=bk_live_your_key_here

4. Import and use

Components are copied directly into your project as regular .tsx files. Import them like any other local component.

import { Button } from "@/components/ui/button"

init

Initialize Bounce Kit in your project. Creates bouncekit.json with your preferred paths and aliases.

npx bouncekit@latest init

add

Install one or more components. Copies source files into your project and installs any missing dependencies.

npx bouncekit@latest add dialog data-table sidebar

diff

Show what changed in a component since you installed it. Useful before updating.

npx bouncekit@latest diff button

update

Update installed components to the latest version. Shows a diff and asks for confirmation before overwriting.

npx bouncekit@latest update

list

List all available components in the registry with their tier (free/pro) and install status.

npx bouncekit@latest list

CSS Variables

Bounce Kit uses HSL-based CSS variables for all colors. Override them in your globals.css to match your brand. Visit the theme customizer for a visual editor.

:root {
  --background: 0 0% 99%;
  --foreground: 0 0% 9%;
  --brand: 36 90% 50%;
  --brand-foreground: 0 0% 100%;
}

Dark Mode

Every component supports dark mode out of the box via the .dark class (next-themes). Define your dark palette in globals.css.

.dark {
  --background: 220 10% 6%;
  --foreground: 220 10% 92%;
  --brand: 36 90% 55%;
}

Theme Customizer

Use the interactive theme customizer to preview presets, tweak individual tokens, and copy the final CSS.

Where components live

The CLI installs components into your project following the structure below. You own every file — modify anything.

src/
├── components/
│   ├── ui/          ← primitives (button, dialog, tabs…)
│   ├── dashboard/   ← dashboard shell, sidebar, charts
│   ├── auth/        ← login, signup, forgot-password
│   ├── settings/    ← profile, billing, API keys
│   ├── marketing/   ← hero, pricing, testimonials
│   ├── onboarding/  ← wizard, checklist
│   ├── feedback/    ← toast, alert
│   └── shared/      ← logo, mobile-nav, page-transition
├── lib/
│   ├── utils.ts     ← cn() helper
│   ├── animations.ts← motion presets
│   └── api.ts       ← data layer (swap mock → real)
└── hooks/           ← useMediaQuery, useDebounce…

The api.ts pattern

All data flows through src/lib/api.ts. Each function returns mock data by default. Replace the function body to connect your real backend — REST, GraphQL, tRPC, or direct DB calls.

// Before (mock)
export async function getDashboardStats() {
  await delay(100)
  return MOCK_STATS
}

// After (real)
export async function getDashboardStats() {
  const res = await fetch("/api/dashboard/stats")
  if (!res.ok) throw new Error("Failed to fetch")
  return res.json()
}