Skip to main content
Blocks are pre-built, production-ready components and page layouts that you can copy and paste into your application. They range from simple UI patterns to complete dashboard layouts.

​
What are blocks?

Blocks are larger compositions built from shadcn/ui components. Unlike individual components, blocks combine multiple components, hooks, and utilities to create complete, functional sections of your application. Examples include:
  • Dashboard layouts with sidebars, headers, and content areas
  • Authentication pages with login and signup forms
  • Marketing sections like hero sections, feature grids, and testimonials
  • E-commerce product listings, shopping carts, and checkout flows
All blocks are built using shadcn/ui components and follow the same open code philosophy - you own the code and can customize it to fit your needs.

​
Using blocks

Blocks can be added to your project using the CLI: 
npx shadcn@latest add [block-name]
For example, to add a dashboard block: 
npx shadcn@latest add dashboard-01

​
Available blocks

Browse the complete blocks library at ui.shadcn.com/blocks.

Dashboard Blocks

Complete dashboard layouts with sidebars, navigation, and data displays

Authentication Blocks

Login, signup, and password reset pages

Sidebar Layouts

Responsive sidebar layouts with collapsible navigation

Custom Blocks

Learn how to create and share your own blocks

​
Contributing blocks

The community is invited to contribute blocks to the library. Share your components with other developers and help build a collection of high-quality, reusable UI patterns.
1

Fork the repository

git clone https://github.com/shadcn-ui/ui.git
2

Create a new branch

git checkout -b username/my-new-block
3

Add your block

Create a new folder in apps/v4/registry/new-york-v4/blocks:
apps/v4/registry/new-york-v4/blocks/
└── my-block/
    ├── page.tsx
    ├── components/
    │   └── my-component.tsx
    └── hooks/
        └── use-my-hook.ts
4

Register your block

Add your block definition to the registry following the registry schema.

​
Block structure

A typical block includes:
  • Page component - The main entry point for the block
  • Components - Any custom components specific to the block
  • Hooks - Custom React hooks used by the block
  • Utils - Utility functions and helpers
  • Styles - Any block-specific styling

​
Customization

Blocks are fully customizable since you own the code. After adding a block:
  1. Review the generated files in your project
  2. Modify components to match your design
  3. Adjust layouts and functionality
  4. Update colors and theming variables

​
Learn more

Registry Documentation

Learn how the registry system works

Creating Custom Blocks

Build and distribute your own blocks

Build docs developers (and LLMs) love

Get started for freeTalk to us