Docs / Getting Started with Shadcnblocks

Getting Started with Shadcnblocks

Browse, preview, and install shadcn/ui blocks using the Explorer and shadcn CLI. Get started with Tailwind CSS and React components.

Welcome to Shadcnblocks! This guide will help you get started with browsing, previewing, and installing blocks in your project.

Quick Start

1. Browse the Explorer

The Explorer is the best way to find and preview blocks:

  1. Open the Explorer
  2. Browse or search for blocks
  3. Click any block to preview it
  4. Customize with the sidebar options

2. Configure Your Project

Before installing blocks, ensure your project has:

components.json — Download from the Explorer toolbar or create manually:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "radix-vega",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  },
  "registries": {
    "@shadcnblocks": "https://shadcnblocks.com/r/{name}.json"
  }
}

globals.css — Download from the Explorer toolbar or use the default globals.css.

3. Install Blocks

Copy the CLI command from the Explorer toolbar:

npx shadcn@latest add @shadcnblocks/hero1

The CLI will:

  • Install the block source code
  • Add any required shadcn/ui components
  • Install npm dependencies
  • Use your configured style and UI library

Key Features

UI Library Selection

Choose between Radix UI (default) and Base UI:

  • Select in the Explorer sidebar
  • Affects the components.json export
  • CLI installs the correct primitives automatically

Learn more about Base UI →

Component Styles

Preview blocks in the same styles available in the Shadcn UI Create page:

StyleDescription
VegaClassic shadcn/ui look
NovaCompact layouts
MaiaSoft and rounded
LyraSharp and boxy
MiraUltra-compact

Learn more about styles →

Theme Preview

Apply color themes to see how blocks look with different color schemes. Download a themed globals.css from the toolbar.

Content Packs

Some blocks support content packs—realistic content variations to preview different scenarios.

Pro Access

Free users can:

  • Browse all blocks
  • Preview blocks with themes and appearances
  • Install free blocks via CLI
  • View free block source code

Pro/Premium users additionally get:

  • Access to 976+ premium blocks
  • 1189+ component examples
  • Component style selection
  • UI library selection
  • Code view for all blocks
  • Figma UI Kit
  • All templates

View pricing →

Next Steps