How to Create Modern Websites Faster with Shadcn Space

Shadcn Space offers high-quality, production-ready components, blocks, templates, and pages built using shadcn/ui, Tailwind CSS, and modern React practices.

In this tutorial, you’ll learn how to use Shadcn Space blocks and templates to build real projects faster.

How Shadcn Space fits into the shadcn/ui ecosystem

shadcn/ui introduced a powerful idea: UI components should be copied directly into your project, not installed as locked dependencies. Once you add them, the code is fully yours—you can customize, extend, or refactor it anytime.

Shadcn Space follows this same philosophy.

While shadcn/ui focuses on individual UI components, Shadcn Space goes one step further by providing complete sections, layouts, dashboards, and templates. These are built using shadcn/ui components and Tailwind CSS.

Shadcn Space does not replace shadcn/ui or add new abstractions.

Instead, it helps you move faster by giving you a production-ready structure while keeping the same copy-paste workflow.

In short:

• shadcn/ui provides the components
• Shadcn Space provides the structure
• You keep full control of the code

What you can build with Shadcn Space

Shadcn Space helps you quickly build frontend UI pages and layouts using shadcn/ui and Tailwind CSS.

You can create:

• Marketing pages like landing pages, hero sections, feature sections, pricing pages, and footers

• Dashboard UI pages with sidebars, headers, stats sections, charts, and content layouts

• Admin and internal tools such as tables, forms, filters, and management pages

• Reusable layout pages including navigation systems and page wrappers

Everything is frontend-only, copy-paste ready, and fully customizable.

Since everything is built with shadcn/ui and Tailwind CSS, the UI is:

• Responsive by default

• Easy to customize

• Visually consistent

• Ready to connect to any backend later

Shadcn Space lets you build polished UI pages first, so you can focus on functionality when needed.

Prerequisites before getting started

Before using Shadcn Space, make sure your project includes:

• Node.js 18 or higher

• A React framework (Next.js recommended)

• Tailwind CSS set up

• shadcn/ui initialized

• Base UI (used internally by shadcn/ui)

Shadcn Space is built on top of shadcn/ui, which uses Base UI for accessibility and composition. This setup ensures everything works correctly.

You don’t need a backend or API for this tutorial. We’ll focus only on frontend UI.

Once your setup is ready, you can start adding Shadcn Space components using the CLI or MCP Server.

Creating a new web project with shadcn/ui and Base UI

Before adding Shadcn Space, you need a frontend project that’s already set up with shadcn/ui powered by Base UI. This ensures all components and blocks work correctly and follow the same accessibility and styling conventions.

Instead of manually creating a Next.js app and configuring shadcn/ui step by step, you can use the shadcn create command to scaffold everything in one command.

This setup gives you:

• A Next.js project (App Router)
• shadcn/ui pre-installed
• Base UI enabled for core primitives
• Tailwind CSS configured
• Icons (Lucide), fonts, and theme defaults are ready to use

Create the project

Choose the package manager you prefer and run one of the following commands:

pnpm

pnpm dlx shadcn@latest create --preset "https://ui.shadcn.com/init?base=base&style=vega&baseColor=neutral&theme=neutral&iconLibrary=lucide&font=inter&menuAccent=subtle&menuColor=default&radius=default&template=next" --template next

npm

npx shadcn@latest create --preset "https://ui.shadcn.com/init?base=base&style=vega&baseColor=neutral&theme=neutral&iconLibrary=lucide&font=inter&menuAccent=subtle&menuColor=default&radius=default&template=next" --template next

yarn

yarn dlx shadcn@latest create --preset "https://ui.shadcn.com/init?base=base&style=vega&baseColor=neutral&theme=neutral&iconLibrary=lucide&font=inter&menuAccent=subtle&menuColor=default&radius=default&template=next" --template next

bun

bunx --bun shadcn@latest create --preset "https://ui.shadcn.com/init?base=base&style=vega&baseColor=neutral&theme=neutral&iconLibrary=lucide&font=inter&menuAccent=subtle&menuColor=default&radius=default&template=next" --template next

Once the command finishes, you’ll have a fully working Next.js frontend project with shadcn/ui and Base UI already configured.

At this point:

• You don’t need to run shadcn init
• You don’t need to set up Tailwind manually
• You’re ready to start adding Shadcn Space Components via CLI or MCP Server

---

Installing and Using Shadcn Space via CLI (v3)

With Shadcn CLI v3, you manage components and blocks through components.json. This workflow gives you control over which components are included and lets you integrate external registries like Shadcn Space.

1. Add the Shadcn Space Registry

Open your components.json and add the following registry configuration:

{  
"registries": {  
  "@shadcn-space": {  
    "url": "https://shadcnspace.com/r/{name}.json",  
    "params": {  
      "email": "${EMAIL}",  
      "license_key": "${LICENSE_KEY}"  
    }  
  }  
 }  
}

Note: Replace ${EMAIL} and ${LICENSE_KEY} with your registered Shadcn Space credentials.

This tells the CLI where to fetch components and blocks from Shadcn Space.

For more information about how to use it in your project

2. Copy the CLI command for a block

1. Visit Shadcn Space
2. Browse the available blocks for your project. (e.g., hero section, feature section, pricing)
3. Click “Copy CLI Command” for the block you want

It will look like:

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

---

3. Run the CLI command in your project

Paste the copied command in your terminal:

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

The block is now added to your project, ready to use and fully editable.

---

4. Customize the block

Since the block is copied into your project, you can now:

• Update text, images, or layout
• Adjust Tailwind CSS classes
• Combine multiple blocks to build your landing page

Example:

import { HeroSection } from "@/components/hero-section";  

export default function HomePage() {  
return (  
  <main>  
    <HeroSection />  
    {/* Add more blocks like feature or pricing sections */}  
  </main>  
  );  
}

Now you have a production-ready block in your project, fully under your control, and can continue building the frontend of your landing page.

---

Example: Building a saas landing page with Shadcn Space blocks using CLI (v3)

With Shadcn CLI v3, blocks are not abstracted away or locked behind a builder. Instead, you browse blocks on the Shadcn Space website, add the ones you need via CLI, and customize them directly in your codebase.

In this example, we’ll show how to assemble a complete SaaS landing page using pre-built Shadcn Space blocks.

Blocks used in this example

For our SaaS landing page, we’ll use the following blocks from Shadcn Space:

• hero-01 — Hero section
• feature-01 — Product features
• about-us-section-01 — About the product/company
• pricing-02 — Pricing plans
• testimonial-02 — Customer testimonials
• cta-01 — Call to action
• blog-01 — Blog or resources section
• footer-01 — Footer

Each block is added individually, giving you full control over structure and styling.

---

Step 1: Add blocks using the CLI

Visit shadcnspace.com, open the block you want, and copy the CLI command provided for that block.

Run the following commands in your project:

npx shadcn@latest add @shadcn-space/hero-01  
npx shadcn@latest add @shadcn-space/feature-01  
npx shadcn@latest add @shadcn-space/about-us-section-01  
npx shadcn@latest add @shadcn-space/pricing-02  
npx shadcn@latest add @shadcn-space/testimonial-02  
npx shadcn@latest add @shadcn-space/cta-01  
npx shadcn@latest add @shadcn-space/blog-01  
npx shadcn@latest add @shadcn-space/footer-01

Each command downloads the block and places it directly into your project (typically inside the components/ directory).

There’s no magic here — just clean, readable React components.

---

Step 2: Compose the landing page

Once the blocks are added, you simply import and arrange them on your page.

For a Next.js app, this could be your app/page.tsx file:

import AboutAndStats01 from "@/components/shadcn-space/blocks/about-us-01";  
import Blog from "@/components/shadcn-space/blocks/blog-01/blog";  
import CTA from "@/components/shadcn-space/blocks/cta-01/cta";  
import Feature01 from "@/components/shadcn-space/blocks/feature-01";  
import Footer from "@/components/shadcn-space/blocks/footer-01/footer";  
import AgencyHeroSection from "@/components/shadcn-space/blocks/hero-01";  
import Pricing from "@/components/shadcn-space/blocks/pricing-02/pricing";  
import Testimonial01 from "@/components/shadcn-space/blocks/testimonial-02";  
export default function Page()   
{    
return (     
  <>       
    <AgencyHeroSection />       
    <Feature01 />        
    <AboutAndStats01 />       
    <Pricing />       
    <Testimonial01 />       
    <CTA />        
    <Blog />        
    <Footer />      
  </>    
 );  
}

This structure mirrors a real-world SaaS landing page layout.

---

Step 3: Customize everything (because It’s your code)

One of the biggest advantages of Shadcn Space is ownership:

• Update copy to match your SaaS messaging
• Modify layouts and spacing
• Change Tailwind styles
• Add animations, analytics, or business logic
• Remove or reorder sections as needed

Since the blocks live in your codebase, there are no constraints on how far you can customize them.

---

Why this workflow works well for SaaS teams

• Faster than building from scratch
• No vendor lock-in
• Production-ready React + Tailwind code
• Easy to scale and iterate

You choose the blocks, add them via CLI, and shape them into a landing page that fits your product — not the other way around.

Customizing Shadcn Space blocks

Once a block is added to your project, it becomes your code.

You can easily:

• Update text and content (headings, descriptions, CTAs, links)
• Modify the layout (reorder sections, remove parts, change spacing)
• Adjust colors, typography, and styles using Tailwind CSS
• Extend or simplify the block based on your product needs

All blocks are built with shadcn/ui and Base UI, so customization follows the same patterns you already use in your project with no extra configuration or learning curve.

This makes Shadcn Space ideal for building and iterating on real-world SaaS landing pages quickly, while keeping full control over the UI.

Installing and Using Shadcn Space via MCP Server

For developers who prefer a more integrated workflow inside their editor, Shadcn Space also supports usage via the MCP (Model Context Protocol) Server.

The MCP Server allows tools like Cursor, Windsurf, Cline, Claude, and others to directly access Shadcn Space blocks and components without manually browsing or copying code.

---

What the MCP server does

The Shadcn Space MCP server:

• Exposes Shadcn Space components and blocks to MCP-enabled editors
• Let’s you discover and add blocks directly from your IDE
• Uses the same registry-based approach as the CLI
• Keeps everything aligned with your local shadcn/ui setup

You still get copy-paste ownership — the code is added to your project and fully editable.

---

Setting up the MCP server

To use Shadcn Space with MCP, install the MCP server using the official CLI:

npx shadcnspace-cli install <client>

Supported clients include:

• Cursor
• Windsurf
• Claude
• Cline
• Antigravity

Alternatively, you can manually add it to your MCP configuration:

{  
 "mcpServers": {  
  "shadcnspace-mcp": {  
    "command": "npx",  
    "args": ["-y", "shadcnspace-mcp@latest"]  
  }  
 }  
}

Once configured, your editor can query Shadcn Space blocks contextually.

For more information, visit How to use the MCP server

Adding blocks using MCP

With MCP enabled:

• Browse available Shadcn Space blocks inside your editor
• Select the block you want (hero, pricing, features, etc.)
• Insert it directly into your project
• Customize the code like any other local component

There’s no difference in output compared to the CLI — MCP simply improves discovery and workflow speed.

Example: Creating a landing page using Shadcn Space MCP (Editor workflow)

With the Shadcn Space MCP server, you don’t need to remember block names or run CLI commands manually.

You can create pages directly from your editor using natural commands.

---

Using MCP inside your editor

Once MCP is configured, open your editor (Cursor, Claude, etc.) and use a prompt like:

/create-ui create a SaaS landing page using shadcnspace blocks

Or more specifically:

/create-ui create a web-builder landing page using shadcnspace

The MCP server understands:

• Your project context (shadcn/ui + Base UI)
• Available Shadcn Space blocks
• Where components should live in your codebase

---

What happens next

Using MCP, your editor will:

• Suggest relevant Shadcn Space blocks (hero, features, pricing, CTA, etc.)
• Add the selected blocks as local components
• Insert them into your page file
• Keep everything editable and framework-native

No templates. No lock-in. Just React components.

---

Customizing the generated page

After the page is created, you can:

• Update text and content directly in the components
• Change layout order or remove sections
• Adjust colors, spacing, and typography with Tailwind
• Extend blocks with your own logic if needed

The MCP server only helps with generation and discovery — the code is fully yours.

---

Why this feels powerful

This workflow is ideal when:

• You want to build pages fast
• You prefer describing UI instead of searching for blocks
• You iterate visually while coding
• You want AI-assisted UI without losing control

Think of it as designing pages through conversation, backed by real production-ready components.

CLI vs MCP: which workflow should you choose?

Both CLI and MCP server do the same core job:

They add Shadcn Space blocks as real, editable code inside your project.

The difference is how you interact with them.

---

Shadcn Space CLI Workflow

Think of the CLI as a command-driven approach.

You:

• Decide which block you want
• Run a CLI command
• The block is added to your project

This works best when:

• You already know the block name
• You’re following a predefined layout or design
• You prefer terminal-based workflows
• You want repeatable, scriptable setups

CLI is great for project setup, consistency, and automation.

---

MCP server workflow

MCP is more like browsing UI blocks inside your editor.

You:

• Explore available blocks in your IDE
• Pick what fits your page
• Insert it directly into your code

This works best when:

• You’re exploring or experimenting with layouts
• You want faster iteration without switching tabs
• You’re designing pages while coding
• You work heavily inside Cursor, Claude, or similar tools

MCP shines during UI exploration and rapid iteration.

---

Same output, different entry point

Regardless of which you use:

• The generated code is identical
• Blocks live locally in your project
• You can modify text, layout, and styles freely
• Nothing is locked or abstracted

Many teams use both:

• CLI for initial setup
• MCP for daily UI building and refinement

---

Quick rule of thumb

• Know what you want? → Use CLI
• Still exploring? → Use MCP

Both workflows are first-class citizens in Shadcn Space.

Conclusion

Shadcn Space is built to fit naturally into the shadcn/ui ecosystem, not replace it.

Whether you prefer a CLI-driven workflow or an editor-first MCP experience, the goal stays the same:

• Add high-quality UI blocks fast
• Keep everything as local, editable code
• Customize freely without lock-in

You choose the blocks, bring them into your project, and shape them into real products — landing pages, marketing sites, or full SaaS frontends — using tools you already know.

If you’re building with shadcn/ui, Shadcn Space helps you move faster without giving up control.

---

Roadmap: What’s coming next

Shadcn Space is just getting started. Here’s what’s planned next:

• Shadcn Builder A visual-first way to compose pages using Shadcn Space blocks.
• Motion Utilities Reusable animation helpers designed to work seamlessly with shadcn/ui and Tailwind.
• Pro Blocks & Templates Advanced, production-grade blocks and complete templates for SaaS, dashboards, and marketing sites.
• Pro Figma UI Kit A deeper design system for teams that want a tighter design-to-development workflow.
• Expanded MCP Capabilities Smarter editor integrations for faster discovery and page generation.

The focus remains the same: real components, real ownership, production-ready UI.