Installation

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

Building Your Component

1. Get the Template

Clone this repository, or copy it as the starting point for your own project.

2. Install Dependencies

pnpm install

3. Create Your Component

Add a new file at registry/cobalt/ui/my-button.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/cobalt/ui/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!

Use This Registry

Every item here depends on other items from this registry (for example @cobalt/button or @cobalt/input-group), so register the @cobalt namespace once in your project's components.json. Without it, npx shadcn@latest add @cobalt/<name> fails with an unknown registry error.

{
  "registries": {
    "@cobalt": "https://your-site.com/r/{name}.json"
  }
}

Replace your-site.com with the domain where this registry is deployed. Then add any item by name:


$ pnpm dlx shadcn@latest add @cobalt/button

Components and blocks install into components/ui/ and components/, with their helper files next to them, so imports resolve without edits.

Theme

Components work with any shadcn theme. Add theme-cobalt to get the exact gradients, hairline borders, shadows and status colors these components were designed around:


$ pnpm dlx shadcn@latest add @cobalt/theme-cobalt

Use A Component

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

Your own registry works the same way: register its URL under a namespace of your choice, then add items as @your-namespace/<name>.

On this page