Blocks is a component/block registry that provides 50+ modern, clean, accessible UI blocks you can copy and paste directly into your React/Next.js projects.
Each block includes complete source code and follows the same composition patterns that shadcn/ui developers already use in their projects. You get full control over the code once it’s in your project.
Features
📦 Multiple Categories: The registry organizes 59 blocks across nine categories, including AI chatboxes, dialogs, file uploads, forms, login screens, sidebars, statistics displays, and tables.
🎨 Accessible Components: All blocks include proper ARIA attributes and keyboard navigation support.
⚙️ shadcn CLI Integration: Install blocks directly through the shadcn command-line interface using simple add commands.
🔧 Full Code Ownership: Components copy into your project as source code rather than package dependencies.
🎯 Live Previews: Browse all available blocks with interactive previews at blocks.so before adding them to your project.
🔌 Registry Configuration: Set up the remote registry once in your components.json file and access any block through the CLI.
Use Cases
- Login Systems: Integrate ready-made login and signup forms for user authentication.
- Dialog Modals: Add customizable dialog boxes for alerts, confirmations, or data input.
- Sidebar Navigation: Implement responsive sidebars for app layouts and menus.
- File Upload UI: Use pre-built components for handling file uploads with drag-and-drop support.
- AI Chatbot: Create a modern, ChatGPT-like AI chatbot using 4 AI chatbox blocks.
How to Use It
1. Configure your project’s components.json file to connect to the Blocks registry. Add the registry configuration in the registries section of your file.
This configuration tells the shadcn CLI where to fetch block definitions. The
{name}placeholder gets replaced with the specific block name when you run installation commands.
{
"registries": {
"@blocks": "https://blocks.so/r/{name}.json"
}
}2. Or install individual blocks using the shadcn CLI. Navigate to your project directory in the terminal and run the add command with the block identifier.
npx shadcn@latest add @blocks/ai-013. You can also install blocks using direct registry URLs without configuring the components.json file. This method works well for testing individual blocks before committing to full registry integration.
Browse available blocks at blocks.so before installation. The website shows live previews of each component along with their names and categories. Click on any block to view its implementation details and copy the installation command.
npx shadcn@latest add https://blocks.so/r/ai-01.json4. Import and use installed blocks in your React components just like any other shadcn/ui component. The blocks follow standard React patterns and accept props for customization.
5. All available UI blocks:
- AI: 4 blocks for AI-related interfaces.
- Dialogs: 12 blocks for creating modal dialogs.
- File Upload: 6 blocks for file upload functionality.
- Form Layout: 5 blocks for structuring forms.
- Grid List: 3 blocks for displaying data in a grid format.
- Login & Signup: 9 blocks for user authentication forms.
- Sidebar: 6 blocks for application navigation.
- Stats: 12 blocks for displaying statistics.
- Tables: 2 blocks for data tables.
Related Resources
- shadcn/ui: The underlying component library used to build the blocks.
- Tailwind CSS: The utility-first CSS framework used for styling the components.
- Next.js: A React framework that can be used to build applications with these blocks.
FAQs
Q: Do I need to install shadcn/ui before using Blocks?
A: Yes. Blocks functions as an extension to shadcn/ui projects. You need an existing shadcn/ui setup with the components.json configuration file before adding blocks from the registry.
Q: Can I modify blocks after installation?
A: Yes. Blocks install as source code directly into your project. You own the code completely and can modify any aspect of the components without restriction.
Q: Do blocks receive automatic updates?
A: No. Blocks copy into your project as static source code rather than package dependencies. You maintain full control over the code but need to manually update components if you want newer versions.
Q: Are all blocks free to use?
A: Yes. The entire Blocks registry is open source and free for both personal and commercial projects. No licensing fees or attribution requirements apply.
Q: Can I use blocks without the shadcn CLI?
A: Yes. You can copy component code directly from blocks.so and paste it into your project manually. The CLI simply automates the file creation and dependency management process.
