shadcn/studio Blocks Documentation

Build responsive layouts with shadcn/studio Blocks for rapid, professional web development.

What does the Block mean?

A Block refers to a segment of pre-designed code, crafted by professional designers and developers to provide reusable components or structures within a project. This modular approach helps streamline the development process, ensuring consistency and efficiency.

How to effectively use the blocks?

Before getting started, make sure your project is properly set up with shadcn/ui. Refer to the official Getting Started/Installation docs for setup instructions.

Once your project is ready, you can begin integrating blocks by following ways:

FOR PRO USER: Please sign in to shadcn/studio with your account credentials

Visit the Blocks page to explore categories like Marketing, Dashboards, Bento, Datatable, and more.

Copy the Code

Choose your desired block (e.g., About us Section).
Click the Code tab to view different files containing respective code.

Copy the code and paste it into your project where needed.

Using CLI

The shadcn/studio CLI provides a faster way to add blocks directly to your project. Simply run the CLI command for your desired block, and it will automatically download and integrate all necessary components, dependencies, and configurations. This method is ideal for quick setup and ensures that all required files are properly structured in your project.

For detailed CLI setup and usage instructions, check out the CLI documentation.

Using Download Button Functionality

The Download Button feature allows you to instantly download a complete block as a ZIP file containing all necessary files, components, and dependencies. This is perfect for offline development or when you prefer to manually organize files in your project structure. Simply click the download button on any block, and you'll receive a compressed package with all the code files, assets, and documentation needed to integrate the block into your project.

Using Copy Prompt Functionality

The Copy Prompt feature in shadcn/studio allows you to quickly generate AI-optimized prompts for effortless integration of blocks into your project. Click the Copy Prompt button on any blocks section. Paste the copied prompt into your preferred IDE like VS Code, Cursor, or Windsurf and append custom instructions such as desired layout, placement context, or target framework conversions. Let the AI editor do the rest.

For the detailed understanding of the copy prompt, refer to the Copy Prompt documentation.

Using v0

v0 integration allows you to seamlessly import shadcn/studio blocks directly into Vercel's v0 platform for rapid prototyping and development. Simply click the "Open in v0" button on any block, and it will automatically open in v0 with all the necessary code, components, and styling pre-configured. This feature enables you to quickly iterate, customize, and deploy your blocks within v0's AI-powered development environment.

How to customize the blocks?

Customizing blocks is easy with TailwindCSS and shadcn/studio semantic classes. Here's how you can do it:

1. Using TailwindCSS:

TailwindCSS provides utility classes to easily adjust the spacing, padding, margins, and other layout properties.

For example:

Padding: You can adjust padding using classes like p-2, p-4(increasing the padding).

Margins: Similarly, you can adjust margins using classes like m-2, m-4 (increasing the margin).

Gap: You can also use the gap class to adjust the space between elements within a flex or grid layout.

2. Using Shadcn components:

Shadcn offers predefined props for common UI elements like size, variant, many more.

For example:

Change Button size: You can change button size using props like

3. Update Icons

Blocks use Lucide Icons from lucide-react, but you can also use any other icon of your choice.

With these simple tools, you can quickly adjust and style your blocks using both TailwindCSS and shadcn/studio classes without needing to write extra CSS.

How can I modify shadcn/studio block using shadcn/studio MCP?

You can easily modify shadcn/studio blocks/components using the MCP (MCP Server) by using the /rui command. This command allows you to interact with the MCP Server and make changes to the blocks/components as per your requirements.

Example: /rui Update the layout of hero section from vertical to Horizontal.

For a basic understanding of the MCP setup and working, refer to the MCP documentation.