Installation

This guide will help you set up your project to use components from the Vandoko Registry.

Prerequisites

Before you begin, ensure you have:

• A Next.js 16+ project with React 19.2+
• TailwindCSS 4 configured
• shadcn/ui initialized in your project

Configure Your Project

1. Update components.json

Add the Vandoko registry to your components.json file:

{
  "$schema": "https://ui.shadcn.com/schema",
  "style": "new-york",
  "tailwind": {
    "baseColor": "neutral"
  },
  "registries": {
    "@vandoko": {
      "url": "https://registry.vandoko.com/r/{name}.json"
    }
  }
}

2. Install a Component

Once configured, install components using the shadcn CLI:

You can also install multiple components at once:

npx shadcn@latest add @vandoko/scb-hero-01 @vandoko/scb-feat-01 @vandoko/scb-foot-01

3. Import and Use

Import the component in your page or layout:

import { Hero3 } from "@/components/scb-hero-01";

export default function LandingPage() {
  return (
    <main>
      <Hero3 />
    </main>
  );
}

Local Development

For local development against the registry, install via direct URL:

npx shadcn@latest add http://localhost:3001/r/scb-hero-01.json

Theming

All Vandoko components use oklch colors and reference CSS variables. Make sure your globals.css includes the Vandoko color palette for proper theming.

Troubleshooting

Component not found

Ensure the registry URL is correct and the component name matches exactly.

Style conflicts

Vandoko components expect the new-york style. Ensure your project is configured accordingly.

Missing dependencies

Some components have peer dependencies. The CLI will prompt you to install them, but you can also check each component's documentation for requirements.