Vercel Logo

Publishing your components shouldn't require a full app or custom registry. If you just want to share a component as fast as possible, you can use Vercel’s static hosting.

Here’s the simplest way to get your new MetricCard component live in seconds with Vercel.

Step 1: Create a Folder

Make a folder with this structure:

my-component/
├── public/
│   └── metric-card.json
└── vercel.json

Put your registry item JSON (e.g. metric-card.json) in the public/ folder.

Step 2: Add a vercel.json

Create a vercel.json file next to public/ with the following:

JSONvercel.json
{
  "headers": [
    {
      "source": "/(.*).json",
      "headers": [
        {
          "key": "Access-Control-Allow-Origin",
          "value": "*"
        },
        {
          "key": "Content-Type",
          "value": "application/json"
        }
      ]
    }
  ]
}

This ensures your JSON is served with the correct CORS and content headers.

Step 3: Deploy to Vercel

From the root of your folder, run:

vercel --prod

and answer the prompts to deploy your project.

When it's done, your file will be live at something like:

https://your-project-name.vercel.app/metric-card.json

Step 4: Install the Component

Anyone can now run:

npx shadcn@latest add https://your-project-name.vercel.app/metric-card.json

No npm package, no build step, no complexity. How cool is that?

Next Steps

In the next chapter, we'll explore advanced patterns for building sophisticated and interactive components that showcase the full power of the shadcn/ui ecosystem.