Getting started

Prerequisites

Blocks are built with React, Tailwind CSS, and shadcn/ui, so they drop into any project that already has those set up. Two files matter:

• components.json, which tells the Shadcn CLI where to put files and which style to use.
• globals.css, which holds the Tailwind theme tokens the blocks rely on.

If your project does not have these yet, run npx shadcn@latest init first, or follow the shadcn/ui installation guide.

Install with your assistant (recommended)

Our hosted MCP server searches the whole catalog from a plain description and hands your assistant an install command that runs as it is. Nothing is wired into your project, and a free account's key is enough to start.

1. 1

   Create a free API key

   Sign up, then create a key on the API keys page. It is shown once, so copy it somewhere safe.

2. 2

   Add the server to your client

   Every MCP client takes the same two facts, the server URL and your key as a bearer header, in its own config. Pick yours, then see the MCP server guide for where each one keeps the key out of your repository.

   CursorClaude CodeCodexVS CodeAny client

   ~/.cursor/mcp.jsonCopy

   {
     "mcpServers": {
       "shadcn-ui-blocks": {
         "type": "http",
         "url": "https://www.shadcn-ui-blocks.com/api/mcp",
         "headers": {
           "Authorization": "Bearer sk_live_your_key_here"
         }
       }
     }
   }

3. 3

   Ask for a block

   Describe what you need and let the assistant search and install, for example "Find me a pricing section with a comparison table and add it to the landing page." Every match comes back with its install command, so the assistant can run it straight away.

Install from a block's page

Prefer to pick blocks by eye? Every block page carries its install command for the Shadcn CLI.

1. 1

   Find a block

   Browse the block catalog, filter or search, and open the one you want.

2. 2

   Copy its command

   Open the block's Code tab and copy the install command shown there. Blocks from the free collections install from a plain URL with no setup:

   TerminalCopy

   npx shadcn@latest add "https://www.shadcn-ui-blocks.com/r/<block>.json"

3. 3

   Run it

   Run the command in your project. The CLI writes the block's files, installs any npm packages it needs, and adds the shadcn/ui components it depends on.

Next steps

• Connect the MCP server
• Browse the block catalog
• Set up the Shadcn CLI
• See plans and pricing