Shadcn Space Blocks

Blocks are pre-built, production-ready UI sections composed of multiple shadcn/ui components. They help you build complete pages faster while keeping full control of your code.

Every block follows the copy-and-paste philosophy — no NPM lock-in, no black boxes, and complete customization freedom. We have used Base UI as core and built variants on top of it.

What We Provide

  • Marketing Blocks : Hero sections, feature grids, pricing, testimonials, CTAs.
  • Application Blocks : Dashboards, tables, forms, authentication layouts.
  • Navigation Blocks : Headers, footers, sidebars, breadcrumbs.
  • Animated Blocks : Motion-enhanced blocks powered by Framer Motion.
  • Free & Premium : Open-source blocks plus advanced premium layouts.

How to effectively use the blocks?

Before using the shadcnspace 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:

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

Blocks page

Copy Blocks

Every block can be copied directly from the documentation and pasted into your project.

  1. Open the block you want to use.

  2. Now, right on top of the block preview, you will see a tab withCode and "Preview" titles. Click on the "Code" tab.

    Block code tab

  3. There you will see the source code of the block. Copy the code and paste it into your project.

    Block source code
  4. Customize styles, layout, or logic as needed.

No installation required. You fully own the code.

Install Blocks with the CLI

CLI command dropdown

Use the Shadcn CLI to install blocks directly into your project. This is the fastest and most reliable way to get started.

npx shadcn@latest add @shadcn-space/hero-section

The CLI automatically resolves dependencies and places files in the correct directories.

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

Use Blocks with v0

v0 integration

Shadcn Space blocks integrate seamlessly with v0, enabling rapid prototyping and AI-assisted UI generation.

  • Preview and iterate on block layouts visually.
  • Refine UI using natural language prompts.
  • Export production-ready React code.

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

Design Blocks in Figma

shadcnSpace dashboard ui kits and templates

Many blocks are also available as Figma components, matching their code counterparts for seamless design-to-dev workflows.

  • Explore block layouts visually.
  • Customize spacing, colors, and variants.
  • Hand off designs with confidence.
Explore Figma Blocks →

Sorting and Finding Blocks

Shadcn Space makes it easy to discover the right block for your project by providing simple and powerful sorting and filtering options on the Blocks page.

Follow the steps below to quickly narrow down the collection and focus only on the blocks that matter to you.

  1. Open the Blocks page and browse the full collection of available blocks.
  2. Sort blocks by date to view the Newest additions first or switch to Oldest to explore earlier, time-tested layouts.
  3. Filter blocks by pricing to match your needs:
    • Free — open-source blocks available to everyone.
    • Pro — premium blocks with advanced layouts and features.
    • All — view the complete collection.
  4. Select a block to preview its layout, explore variants, and decide how you want to use it—copy-paste, CLI installation, or AI-assisted workflows.

These tools help you move faster from discovery to implementation, without unnecessary distractions.

Step-by-step sorting and filtering blocks in Shadcn Space

How to customize the blocks?

Customizing Shadcn Space blocks is straightforward since they are built using Shadcn UI and Tailwind CSS. Once you copy the code or install a block via CLI, you have full ownership and can modify it as needed.

1. Using Shadcn UI Props

Most blocks are composed of core Shadcn UI components. You can adjust their appearance by modifying predefined props. For instance, you can change a button's style by switching the variant prop or its scale using the size prop.

<Button variant="outline" size="lg">
  Click Me
</Button>

2. Using Tailwind CSS

Every block is styled with Tailwind CSS utility classes. You can easily tweak the layout, spacing, and colors directly in the code. To increase padding, simply update a class like p-6 to p-10, or change theme colors by modifying the background and text utility classes.

Padding: Adjust spacing using classes like p-2, p-4.

<div className="p-4">
  <!-- Your content goes here -->
</div>

Margin: Adjust layout positioning using classes like m-2, m-4.

<div className="m-4">
  <!-- Your content goes here -->
</div>

3. Updating Icons

Our blocks primarily use Iconify. Iconify is our preferred choice as it provides access to over 200,000 icons from various sets like Phosphor, Solar, and more.

import { Icon } from "@iconify/react";

<Icon 
  icon="solar:user-bold" 
  className="w-6 h-6 text-foreground" 
/>

Note: You can browse and find thousands of icons at icon-sets.iconify.design.

4. How can I modify shadcn space block using shadcn space MCP?

For faster iterations, you can leverage the **Shadcn Space MCP** or our integrated AI tools. By using simple prompts like 

Prompt: 

** Convert this hero section into a split layout
** Change the primary color scheme to blue

the AI can automatically refactor the block while maintaining best practices.