Tools: How to Create Modern Websites Faster with Shadcn Space

How Shadcn Space fits into the shadcn/ui ecosystem ## What you can build with Shadcn Space ## Prerequisites before getting started ## Creating a new web project with shadcn/ui and Base UI ## Create the project ## Installing and Using Shadcn Space via CLI (v3) ## 1. Add the Shadcn Space Registry ## 2. Copy the CLI command for a block ## 3. Run the CLI command in your project ## 4. Customize the block ## Example: Building a saas landing page with Shadcn Space blocks using CLI (v3) ## Blocks used in this example ## Step 1: Add blocks using the CLI ## Step 2: Compose the landing page ## Step 3: Customize everything (because It’s your code) ## Why this workflow works well for SaaS teams ## Customizing Shadcn Space blocks ## Installing and Using Shadcn Space via MCP Server ## What the MCP server does ## Setting up the MCP server ## Adding blocks using MCP ## Example: Creating a landing page using Shadcn Space MCP (Editor workflow) ## Using MCP inside your editor ## What happens next ## Customizing the generated page ## Why this feels powerful ## CLI vs MCP: which workflow should you choose? ## Shadcn Space CLI Workflow ## MCP server workflow ## Same output, different entry point ## Quick rule of thumb ## Conclusion ## Roadmap: What’s coming next 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. 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. Shadcn Space helps you quickly build frontend UI pages and layouts using shadcn/ui and Tailwind CSS. 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 Ready to connect to any backend later Shadcn Space lets you build polished UI pages first, so you can focus on functionality when needed. Before using Shadcn Space, make sure your project includes: A React framework (Next.js recommended) 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. 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: Choose the package manager you prefer and run one of the following commands: Once the command finishes, you’ll have a fully working Next.js frontend project with shadcn/ui and Base UI already configured. 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. Open your components.json and add the following registry configuration: 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 Paste the copied command in your terminal: The block is now added to your project, ready to use and fully editable. Since the block is copied into your project, you can now: Now you have a production-ready block in your project, fully under your control, and can continue building the frontend of your landing page. 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. For our SaaS landing page, we’ll use the following blocks from Shadcn Space: Each block is added individually, giving you full control over structure and styling. Visit shadcnspace.com, open the block you want, and copy the CLI command provided for that block. Run the following commands in your project: 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. 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: This structure mirrors a real-world SaaS landing page layout. One of the biggest advantages of Shadcn Space is ownership: Since the blocks live in your codebase, there are no constraints on how far you can customize them. You choose the blocks, add them via CLI, and shape them into a landing page that fits your product — not the other way around. Once a block is added to your project, it becomes your code. 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. 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. The Shadcn Space MCP server: You still get copy-paste ownership — the code is added to your project and fully editable. To use Shadcn Space with MCP, install the MCP server using the official CLI: Supported clients include: Alternatively, you can manually add it to your MCP configuration: Once configured, your editor can query Shadcn Space blocks contextually. For more information, visit How to use the MCP server There’s no difference in output compared to the CLI — MCP simply improves discovery and workflow speed. 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. Once MCP is configured, open your editor (Cursor, Claude, etc.) and use a prompt like: Or more specifically: The MCP server understands: Using MCP, your editor will: No templates. No lock-in. Just React components. After the page is created, you can: The MCP server only helps with generation and discovery — the code is fully yours. This workflow is ideal when: Think of it as designing pages through conversation, backed by real production-ready components. 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. Think of the CLI as a command-driven approach. This works best when: CLI is great for project setup, consistency, and automation. MCP is more like browsing UI blocks inside your editor. This works best when: MCP shines during UI exploration and rapid iteration. Regardless of which you use: Both workflows are first-class citizens in Shadcn Space. 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: 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. Shadcn Space is just getting started. Here’s what’s planned next: The focus remains the same: real components, real ownership, production-ready UI. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: 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 Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: 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 CODE_BLOCK: 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 CODE_BLOCK: 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 Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: 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 CODE_BLOCK: 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 CODE_BLOCK: 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 Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: 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 CODE_BLOCK: 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 CODE_BLOCK: 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 Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: 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 CODE_BLOCK: 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 CODE_BLOCK: { "registries": { "@shadcn-space": { "url": "https://shadcnspace.com/r/{name}.json", "params": { "email": "${EMAIL}", "license_key": "${LICENSE_KEY}" } } } } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: { "registries": { "@shadcn-space": { "url": "https://shadcnspace.com/r/{name}.json", "params": { "email": "${EMAIL}", "license_key": "${LICENSE_KEY}" } } } } CODE_BLOCK: { "registries": { "@shadcn-space": { "url": "https://shadcnspace.com/r/{name}.json", "params": { "email": "${EMAIL}", "license_key": "${LICENSE_KEY}" } } } } CODE_BLOCK: npx shadcn@latest add @shadcn-space/hero-01 Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx shadcn@latest add @shadcn-space/hero-01 CODE_BLOCK: npx shadcn@latest add @shadcn-space/hero-01 CODE_BLOCK: npx shadcn@latest add @shadcn-space/hero-01 Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx shadcn@latest add @shadcn-space/hero-01 CODE_BLOCK: npx shadcn@latest add @shadcn-space/hero-01 COMMAND_BLOCK: import { HeroSection } from "@/components/hero-section"; export default function HomePage() { return ( <main> <HeroSection /> {/* Add more blocks like feature or pricing sections */} </main> ); } Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: import { HeroSection } from "@/components/hero-section"; export default function HomePage() { return ( <main> <HeroSection /> {/* Add more blocks like feature or pricing sections */} </main> ); } COMMAND_BLOCK: import { HeroSection } from "@/components/hero-section"; export default function HomePage() { return ( <main> <HeroSection /> {/* Add more blocks like feature or pricing sections */} </main> ); } CODE_BLOCK: 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 Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: 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 CODE_BLOCK: 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 COMMAND_BLOCK: 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 /> </> ); } Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: 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 /> </> ); } COMMAND_BLOCK: 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 /> </> ); } CODE_BLOCK: npx shadcnspace-cli install <client> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx shadcnspace-cli install <client> CODE_BLOCK: npx shadcnspace-cli install <client> CODE_BLOCK: { "mcpServers": { "shadcnspace-mcp": { "command": "npx", "args": ["-y", "shadcnspace-mcp@latest"] } } } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: { "mcpServers": { "shadcnspace-mcp": { "command": "npx", "args": ["-y", "shadcnspace-mcp@latest"] } } } CODE_BLOCK: { "mcpServers": { "shadcnspace-mcp": { "command": "npx", "args": ["-y", "shadcnspace-mcp@latest"] } } } CODE_BLOCK: /create-ui create a SaaS landing page using shadcnspace blocks Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: /create-ui create a SaaS landing page using shadcnspace blocks CODE_BLOCK: /create-ui create a SaaS landing page using shadcnspace blocks CODE_BLOCK: /create-ui create a web-builder landing page using shadcnspace Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: /create-ui create a web-builder landing page using shadcnspace CODE_BLOCK: /create-ui create a web-builder landing page using shadcnspace - shadcn/ui provides the components - Shadcn Space provides the structure - You keep full control of the code - 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 - Responsive by default - Easy to customize - Visually consistent - Ready to connect to any backend later - 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) - 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 - 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 - Visit Shadcn Space - Browse the available blocks for your project. (e.g., hero section, feature section, pricing) - Click “Copy CLI Command” for the block you want - Update text, images, or layout - Adjust Tailwind CSS classes - Combine multiple blocks to build your landing page - 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 - 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 - Faster than building from scratch - No vendor lock-in - Production-ready React + Tailwind code - Easy to scale and iterate - 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 - 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 - Antigravity - 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 - Your project context (shadcn/ui + Base UI) - Available Shadcn Space blocks - Where components should live in your codebase - 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 - 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 - 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 - Decide which block you want - Run a CLI command - The block is added to your project - You already know the block name - You’re following a predefined layout or design - You prefer terminal-based workflows - You want repeatable, scriptable setups - Explore available blocks in your IDE - Pick what fits your page - Insert it directly into your code - 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 - The generated code is identical - Blocks live locally in your project - You can modify text, layout, and styles freely - Nothing is locked or abstracted - CLI for initial setup - MCP for daily UI building and refinement - Know what you want? → Use CLI - Still exploring? → Use MCP - Add high-quality UI blocks fast - Keep everything as local, editable code - Customize freely without lock-in - 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.