Learn how to install Lab's components using shadcn CLI or manual installation methods.

Installation

Get started with Lab's in seconds. Use the shadcn CLI or install manually.

Requirements

Before installing Labs, make sure your project meets these requirements:

Labs is fully compatible with the shadcn registry system.

npx shadcn@latest init

npx shadcn@latest --all

npx shadcn@latest registry add https://vaibhavkesarwani.vercel.app/registry.json

npx shadcn@latest add http://vaibhavkesarwani.vercel.app/r/hello-world.json

If you don't want to use the CLI, you can copy components manually.

npm install clsx tailwind-merge lucide-react

lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: any[]) {
  return twMerge(clsx(inputs));
}

components/labs/hello-world.tsx

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

export function HelloWorld() {
  return <Button>Hello World</Button>;
}

Import and use the installed components in your React applications

page.tsx

import { HelloWorld } from "@/components/labs/hello-world";

export default function Page() {
  return <HelloWorld />;
}