0

Installation

How to use this template to build your own shadcn component.

Building Your Component

1. Fork the Template

Click "Use this template" on GitHub.

2. Install Dependencies

pnpm install

3. Create Your Component

Replace the placeholder at registry/new-york/your-component.tsx:

import { forwardRef, HTMLAttributes } from "react"
import { cn } from "@/lib/utils"
 
export interface MyButtonProps extends HTMLAttributes<HTMLButtonElement> {
  variant?: "default" | "outline"
}
 
const MyButton = forwardRef<HTMLButtonElement, MyButtonProps>(
  ({ className, variant = "default", ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={cn(
          "rounded-md px-4 py-2 font-medium",
          variant === "default" && "bg-primary text-primary-foreground",
          variant === "outline" && "border border-input",
          className
        )}
        {...props}
      />
    )
  }
)
 
MyButton.displayName = "MyButton"
 
export { MyButton }

4. Update registry.json

{
  "name": "your-name/your-registry",
  "homepage": "https://your-site.com",
  "items": [
    {
      "name": "my-button",
      "type": "registry:ui",
      "title": "My Button",
      "description": "A custom button component.",
      "files": [
        {
          "path": "registry/new-york/my-button.tsx",
          "type": "registry:ui",
          "target": "components/ui/my-button.tsx"
        }
      ]
    }
  ]
}

5. Build & Deploy

pnpm registry:build
pnpm build

Deploy your app and your component is live!

Installing Components

To install a component from any registry built with this template:

pnpm dlx shadcn@latest add https://example.com/r/my-button.json

Then use it:

import { MyButton } from "@/components/ui/my-button"
 
export function Demo() {
  return <MyButton variant="outline">Click me</MyButton>
}