registry:block

Blocks

Complete page layouts with multiple files, mock data patterns, and data fetching hooks. Install via shadcn CLI and customize for your needs.

Component

Single file, props only

A component is a single .tsx file that accepts props and renders UI. Components don't fetch data.

Examples:

ButtonCardPieChartAvatar

Registry type:

registry:ui

Block

Multiple files, includes data patterns

A block is a multi-file layout with page, components, hooks, and mock data. Blocks show how to fetch and display data.

Examples:

dashboard-01auth-loginsidebar-01

Registry type:

registry:block

Block Structure

registry/sthlm/blocks/
└── dashboard-01/
    ├── page.tsx              # Main entry (registry:page)
    ├── components/
    │   ├── stats-cards.tsx   # registry:component
    │   └── activity-feed.tsx # registry:component
    ├── hooks/
    │   └── use-dashboard.ts  # registry:hook (data fetching pattern)
    └── lib/
        └── mock-data.ts      # registry:lib (mock factories)

Available Blocks

Data Explorer

Interactive BI data explorer with dimension/measure pickers, chart type selector, and live chart visualization. Supports Line, Bar, Stacked Bar, Pie, Scatter, and Heatmap.

applicationdashboardanalytics

Install:

npx shadcn add https://baby-baltazar-xi.vercel.app/r/data-explorer-01.json

Preview

Music Products

Complete page layout for displaying music products in a table format with expandable version details. Includes search, product cards, and version management.

applicationmusic

Install:

npx shadcn add https://baby-baltazar-xi.vercel.app/r/music-products-01.json

Preview

Browse Projects

Complete page layout for browsing and managing projects. Includes create form, search, and project list with actions.

applicationdashboard

Install:

npx shadcn add https://baby-baltazar-xi.vercel.app/r/projects-browse-01.json

Preview

When to Create a Block

Create a Block when:

✓ It's a complete page section (dashboard, login)
✓ It needs multiple files (page + components + hooks)
✓ It includes data fetching patterns
✓ Dev team needs a starting point to customize

Create a Component when:

✓ It's a single reusable UI element
✓ It only needs props (no data fetching)
✓ It can be composed into larger layouts
✓ Examples: Button, Card, Chart, Avatar