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 using the shadcn/studio Blocks, make sure that you've installed shadcn in your project by following the official installation guide.

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

For Pro User: Please login with your credentials and then move forward

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, following the folder structure shown on the left in the above image.

Using Shadcn CLI

The Shadcn CLI is the fastest way to add blocks to your project. It handles everything automatically:

Downloads the block code
Installs required dependencies
Sets up proper file structure
Configures all necessary imports

Need help with Shadcn CLI? Check the Shadcn CLI documentation for step-by-step setup.

Using Download Button

Perfect for offline work or when you want full control over file organization. Here's how:

Step 1: Download the ZIP

Find your desired block
Click the Download button
Save the ZIP file to your computer

Step 2: Extract Files

Unzip the downloaded file
You'll find folders like: components/, lib/, assets/
Each folder contains the necessary files for the block

Step 3: Move to Your Project

Copy files to your project's corresponding folders
Update import paths if your project structure is different

Step 4: Install Dependencies

Check the included imports.
Install the dependencies using in the files.

Step 5: Test Integration

Import the block in your desired page/component
Run your development server
Check for any missing imports or styling issues

Using Copy Prompt

Let AI do the heavy lifting! Perfect for quick iterations and smart customizations.

Click Copy Prompt on any block
Paste into your AI editor (VS Code, Cursor, Windsurf)
Add custom instructions like: "Add this block below the hero section."
Let AI generate the perfect code for your needs

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

Using v0 Integration

Instant prototyping with AI-powered customization:

Click "Open in v0" on any block
Block opens directly in Vercel's v0 platform
Use natural language to modify: "Change colors to blue theme"
Export the final code back to your project

For the detailed understanding of the v0 usage, refer to the Open in v0 documentation.

Using Figma Preview

See exactly how blocks look before coding:

Click "Preview in Figma"
View blocks in professional design environment
Perfect for design reviews and team collaboration
Ensure pixel-perfect implementation

Sorting and Finding Blocks

shadcn/studio provides powerful sorting and filtering options to help you quickly find the perfect blocks for your project. The sorting feature is available on the blocks page to organize content based on your preferences.

How to Use Block Sorting

Step 1: Access the Sorting Menu

Navigate to the Blocks page
Look for the Sort by dropdown in the top-right corner
Click on the dropdown to reveal sorting options

Step 2: Choose Your Sorting Preference

Select Newest to see the latest blocks and stay updated with fresh designs
Choose Pricing to quickly identify free blocks or explore Pro features
Pick ID for a systematic approach to browsing through all available blocks

Step 3: Browse and Select

Blocks will automatically reorder based on your selection
Use this organized view to quickly identify blocks that match your needs

How to customize the blocks?

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

1. 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

2. Using TailwindCSS:

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

For example:

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

Margin: Similarly, you can adjust margin 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.

3. Update Icons

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

With these simple steps, you can quickly adjust and style your blocks using both shadcn/ui and TailwindCSS 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 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 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.

How to Remove Animations from Blocks

While our animations enhance the user experience, you might want to remove them to use only the UI elements or to implement your own custom animations. Follow these guidelines to modify animation behavior in your blocks:

Important Note:

Some animations are tightly integrated with the block functionality. The methods below will work for most standalone animations, but certain dynamic elements may require additional adjustments.

Method 1: Remove Standalone Animation Components

For many blocks, you can simply remove the animated component's import and usage. Here are the most common standalone animations you can remove without affecting functionality:

1. Background Stars

Remove the StarsBackground component import and all instances where it's used.