Getting started

Shadcn UI Blocks install with the Shadcn CLI, straight into your own project. Browse a block, copy its command, and the source and its dependencies land in your codebase, ready to edit.

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 a block

Every block on the site installs the same way.

  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:

    Terminal
    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.

Free collections need no account. To install blocks from the paid collections you own, set up the registry once and install them by name.

Installing blocks you own

Paid blocks install by name through the @shadcn-ui-blocks registry, authorized by your API key. Once it is configured, installing any block you own is a single command:

npx shadcn@latest add @shadcn-ui-blocks/modern-saas-hero-sections-centered-with-backdrop

The one-time setup (registry config and key) is covered in the Shadcn CLI guide. Prefer to work with an AI assistant? The Shadcn MCP guide shows how to browse and install blocks in natural language.

Next steps