shadcn/v0 registry

Built by @jacobmparis

Deploy to Vercel and set a subdomain to use for your shadcn registry.

Registry Endpoints:

• /registry - Lists all available components

• /registry/items/{name} - Returns component configuration

Sample install command:

npx shadcn@latest add https://shadcn-v0.vercel.app/registry/items/button

Editing Components:

Just ask v0 to make changes to your components.

Shadcn component source files are hidden by default in v0 but it will reveal them as it edits them.

Creating Components:

1. Create a new file at /app/{component-name}/page.tsx

2. Export a meta object that describes your component

3. Create the actual source file in the location specified by your meta export and ensure there's a source file at that location (the registry will serve this file)

4. Add your new component to build.ts so it gets compiled into the registry

Example component structure:

import { Button } from "@/components/ui/button"
import { ComponentPageLayout } from "@/components/component-page-layout"

export const dynamic = "force-dynamic"

// This is served from the registry
export const meta = {
$schema: "https://ui.shadcn.com/schema/registry-item.json",
name: "button",
type: "registry:block",
title: "Button",
description: "Displays a button or a component that looks like a button.",
files: [
  {
    // put your source file at this location in components folder
    path: "ui/button.tsx",
    type: "registry:ui",
    // content: we compile your source file into the content property on deploy
  },
],
dependencies: ["@radix-ui/react-slot"],
}

// This is just for visual display within v0
function ButtonExample() {
return (
  <div className="flex flex-wrap gap-4">
    <Button>Default</Button>
    <Button variant="destructive">Destructive</Button>
    <Button variant="outline">Outline</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="ghost">Ghost</Button>
    <Button variant="link">Link</Button>
    <Button size="sm">Small</Button>
    <Button size="lg">Large</Button>
    <Button disabled>Disabled</Button>
  </div>
)
}

export default function ButtonPage() {
return (
  <ComponentPageLayout meta={meta}>
    <ButtonExample />
  </ComponentPageLayout>
)
}