Explorer Guide

The Explorer is a powerful interface for browsing, previewing, and customizing blocks before installation. It offers more control than the standard block pages, including style selection, UI library switching, and content packs.

Overview

The Explorer provides:

• Advanced filtering — Filter by category, component type, and more
• Style preview — See blocks in all component styles
• UI library selection — Switch between Radix UI and Base UI
• Theme preview — Apply any theme to see how blocks look
• Content packs — Preview with realistic content variations
• Quick installation — Copy CLI commands or download configs

Interface Layout

Left Panel: Block Grid

Browse all available blocks in a virtualized grid. The grid efficiently renders thousands of blocks without performance issues.

• Search — Filter blocks by name or description
• Categories — Filter by block type (Hero, Features, Pricing, etc.)
• Scroll — Smooth scrolling through the entire library

Center Panel: Block Preview

View the selected block in an isolated preview environment.

• Responsive preview — See how blocks look at different sizes
• Live updates — Changes in the sidebar apply instantly
• Full-screen mode — Expand for detailed inspection

Right Panel: Options Sidebar

Customize the preview and export configuration.

Sidebar Options

Appearance

Toggle between Light and Dark mode to preview how the block adapts to different color schemes.

Theme

Select from pre-made color themes. Themes modify CSS variables like --primary, --background, and other shadcn/ui color tokens.

Popular themes include:

• Default (Neutral)
• Zinc
• Slate
• Stone
• And many more from community theme editors

Component Style

Choose from the same visual styles available in the Shadcn UI Create page. These styles change border radius, spacing, and visual treatment:

Style	Description
Vega (New York)	Classic shadcn/ui look. Clean and neutral.
Nova	Compact with reduced padding.
Maia	Soft and rounded with generous spacing.
Lyra	Sharp and boxy. Great with mono fonts.
Mira	Ultra-compact for dense interfaces.

Learn more in the Component Styles guide.

UI Library

Switch between the underlying primitive libraries:

• Radix UI — The default, established choice
• Base UI — Lightweight alternative from MUI

This affects both the preview and the exported components.json.

Learn more in the Base UI Support guide.

Content Pack

Some blocks support content packs — pre-made content variations with different images, text, and data. Use this to preview how a block looks with realistic content.

Content packs are especially useful for:

• Seeing how blocks handle different text lengths
• Previewing with industry-specific imagery
• Testing with various data configurations

Toolbar Actions

The toolbar at the top of the preview provides quick actions:

CLI Command

Copy the installation command for the current block:

npx shadcn@latest add @shadcnblocks/hero1

Click the dropdown to change your preferred package manager (npm, pnpm, yarn, bun).

components.json

Download a components.json file pre-configured with:

• Your selected UI library (Radix or Base)
• Your selected component style
• The Shadcnblocks registry

globals.css

Download a globals.css file with:

• All required CSS variables
• Your selected theme colors
• Light and dark mode support

Code View

View the block’s source code. This shows the raw TypeScript/React code that will be installed in your project.

Note: Code view requires a Pro or Premium subscription.

Full Screen

Expand the preview to full screen for detailed inspection.

Report Issue

Found a bug? Click the report button to submit feedback directly to our team.

Keyboard Shortcuts

Navigate the Explorer efficiently with keyboard shortcuts:

Shortcut	Action
↑ / ↓	Navigate between blocks
Enter	Select highlighted block
Escape	Close full screen / dialogs
Cmd/Ctrl + K	Focus search

Tips for Best Results

1. Start with Style Selection

Before browsing, set your preferred component style and UI library. This ensures you’re previewing blocks exactly as they’ll appear in your project.

2. Use Content Packs

Don’t just look at the default content. Try different content packs to see how blocks handle various scenarios.

3. Test Both Appearances

Always check both light and dark mode. Some blocks may need adjustment for your specific theme.

4. Download Config First

Before installing your first block, download the components.json and globals.css from the toolbar. This ensures your project is properly configured.

5. Compare Styles

Not sure which style to use? Open the same block and quickly switch between styles to compare them side-by-side.

Explorer vs Block Pages

Feature	Explorer	Block Pages
Browse all blocks	✓	✓
Preview blocks	✓	✓
Theme selection	✓	✓
Appearance toggle	✓	✓
Component style selection	✓	✗
UI library selection	✓	✗
Content packs	✓	✗
Grid view	✓	✗
Category pages	✗	✓

Use the Explorer when you need advanced customization options. Use Block Pages for quick browsing by category.

Next Steps

• Getting Started — Complete installation guide
• Component Styles — Learn about the styles
• Base UI Support — Switch to Base UI
• Theming — Customize colors