Installation

Copypnpm install

Copyimport { 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 };

Copy{
  "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"
        }
      ]
    }
  ]
}

Copypnpm registry:build
pnpm build

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

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