# Installation

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

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Building Your Component

### 1. Fork the Template

Click "Use this template" on [GitHub](https://github.com/mehmetpekcan/shadcn-registry-kit).

### 2. Install Dependencies

```bash
pnpm install
```

### 3. Create Your Component

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

```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

```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

```bash
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:

```bash
npx shadcn@latest add https://example.com/r/my-button.json
```

Then use it:

```tsx
import { MyButton } from "@/components/ui/my-button";

export function Demo() {
  return <MyButton variant="outline">Click me</MyButton>;
}
```