Skip to main content

Beautiful UI Blocks for Your Next Project

Copy and paste 60+ accessible, customizable UI blocks into your React applications. Built with Tailwind CSS and shadcn/ui.

Get StartedBrowse Blocks

Quick start

Add blocks to your project in minutes

1

Configure your registry

Add the Blocks registry to your components.json file:
components.json
{
  "registries": {
    "@blocks": "https://blocks.so/r/{name}.json"
  }
}
2

Add a block to your project

Use the shadcn CLI to add any block:
npx shadcn@latest add @blocks/login-01
3

Use the block in your app

Import and use the block component in your React application:
app/page.tsx
import { Login01 } from "@/components/login-01"

export default function Page() {
  return <Login01 />
}
All blocks are fully customizable. Modify the components to match your brand and requirements.

Explore blocks by category

Browse our collection of production-ready UI blocks

AI Components

Chat interfaces with voice input, model selection, and file attachments

Login & Auth

Authentication forms with social login, SSO, and magic links

Dialogs

Modal dialogs for confirmations, forms, and user interactions

File Upload

Drag-and-drop file upload components with preview and progress

Forms

Form layouts with validation, side labels, and multi-step wizards

Sidebar

Navigation sidebars with collapsible sections and nested menus

Stats

Dashboard widgets with charts, progress bars, and metrics

Tables

Data tables with sorting, filtering, and pagination

Command Menu

Searchable command palettes with keyboard shortcuts

Why choose Blocks?

Built with Modern Tools

Every block is built with React, Tailwind CSS, and shadcn/ui components for maximum compatibility and customization.

Accessible by Default

All blocks follow WAI-ARIA guidelines and are built with Radix UI primitives for keyboard navigation and screen reader support.

Fully Customizable

Modify colors, spacing, and behavior to match your brand. All source code is yours to customize.

Open Source

MIT licensed and open source. Use in personal and commercial projects with no restrictions.

Ready to build?

Start adding beautiful, accessible UI blocks to your project today.

Get Started

Build docs developers (and LLMs) love

Get started for freeTalk to us