Shadcn Space

https://shadcnspace.com
Admin
Shadcn Space provides a free and pro collection of production-ready Shadcn UI blocks, components,...
Tokens:45,166
Snippets:695
Trust Score:5.5
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install Multiple Components/Blocks with Shadcn CLI

Source: https://shadcnspace.com/docs/getting-started/how-to-use-shadcn-cli

This command demonstrates how to install multiple components or blocks in a single execution using Shadcn CLI. This is useful for setting up new features or pages efficiently.

```bash
npx shadcn@latest add @shadcn-space/button-06 @shadcn-space/animated-text-01
```

--------------------------------

### Install Component using Shadcn CLI v3

Source: https://shadcnspace.com/docs/getting-started/how-to-use-shadcn-cli

This command uses Shadcn CLI v3 to install a component from the '@shadcn-space' registry. It leverages the configured registry in `components.json` to fetch and add the specified component to your project.

```bash
npx shadcn@latest add @shadcn-space/button-06
```

--------------------------------

### Install Free Component using Shadcn CLI v2

Source: https://shadcnspace.com/docs/getting-started/how-to-use-shadcn-cli

This command uses Shadcn CLI v2 to install a free component directly from its JSON URL. CLI v2 does not support namespaces, so components are accessed via their specific registry URLs.

```bash
npx shadcn@latest add https://shadcnspace.com/r/hero-01.json
```

--------------------------------

### Create Next.js Project with Shadcn/UI and Base UI using Bun

Source: https://shadcnspace.com/blog/how-to-use-shadcnspace-developer-guide

Initializes a new Next.js project pre-configured with shadcn/ui and Base UI using the 'bunx' command. This command sets up the project with specified UI parameters and a Next.js template, eliminating the need for manual shadcn init or Tailwind setup.

```bash
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
```

--------------------------------

### Install Shadcn Space MCP Server via CLI

Source: https://shadcnspace.com/blog/how-to-use-shadcnspace-developer-guide

This command installs the Shadcn Space MCP (Model Context Protocol) server using npx. The MCP server enables IDEs and AI tools to directly access and integrate Shadcn Space blocks, streamlining the development workflow. Supported clients include Cursor, Windsurf, Claude, and Cline.

```bash
npx shadcnspace-cli install <client>
```

--------------------------------

### Radix UI Composition Pattern Example

Source: https://shadcnspace.com/blog/radix-ui-vs-base-ui

An example of Radix UI's composition pattern, which relies on predefined slots like Dialog.Root, Dialog.Trigger, and Dialog.Content. This structure is ideal for standard layouts but less flexible for uncommon ones.

```jsx
<Dialog.Root>
  <Dialog.Trigger />  // Given by Radix UI
  <Dialog.Content />  // Given by Radix UI
</Dialog.Root>
```

--------------------------------

### Install Base UI Core Package

Source: https://shadcnspace.com/docs/getting-started/migrate-to-baseui

This command installs the necessary Base UI core package for your project. Base UI is a unified library, unlike Radix UI's approach of using individual packages.

```bash
pnpm add @base-ui/react
```

--------------------------------

### Base UI Composition Pattern Example

Source: https://shadcnspace.com/blog/radix-ui-vs-base-ui

Illustrates Base UI's composition pattern, which encourages users to create their own components for custom layouts and reusable blocks. It does not enforce a required component tree, offering greater flexibility.

```jsx
<Dialog.Root>
  <CustomHeader />  // Design by Us
  <CustomContent /> // Design by Us
</Dialog.Root>
```

--------------------------------

### Install Block with Shadcn CLI

Source: https://shadcnspace.com/docs/getting-started/blocks

Use the Shadcn CLI to install blocks directly into your project. This command automatically resolves dependencies and places files in the correct directories, providing a fast and reliable way to integrate blocks.

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

--------------------------------

### Base UI Dialog Component Example

Source: https://shadcnspace.com/blog/radix-ui-vs-base-ui

Illustrates Base UI's behavior-first approach to building a Dialog component. Developers have full control over the markup, layout, and structure, attaching Base UI's dialog behavior to their own elements.

```jsx
import { Dialog } from "@base-ui-components/react/dialog";

function BaseDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open</Dialog.Trigger>

      <Dialog.Popup className="content">
        <h2>Dialog title</h2>
        <p>Dialog description</p>

        <button>Close</button>
      </Dialog.Popup>
    </Dialog.Root>
  );
}
```

--------------------------------

### Integrate a Hero Section Component in Next.js

Source: https://shadcnspace.com/blog/how-to-use-shadcnspace-developer-guide

Demonstrates how to import and use a Shadcn Space block, such as a HeroSection, within a Next.js application. The example shows rendering the HeroSection component within the main content area of a page, allowing for further customization and integration with other blocks.

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

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

--------------------------------

### Radix UI Dialog Component Example

Source: https://shadcnspace.com/blog/radix-ui-vs-base-ui

Demonstrates the usage of Radix UI's Dialog component, showcasing its structured approach where developers style predefined parts. It requires following Radix's component tree and styling provided elements like Overlay and Content.

```jsx
import * as Dialog from "@radix-ui/react-dialog";

function RadixDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open</Dialog.Trigger>

      <Dialog.Portal>
        <Dialog.Overlay className="overlay" />
        <Dialog.Content className="content">
          <Dialog.Title>Dialog title</Dialog.Title>
          <Dialog.Description>
            Dialog description
          </Dialog.Description>

          <Dialog.Close>Close</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
```

--------------------------------

### Configure Shadcn Space MCP Server Manually

Source: https://shadcnspace.com/blog/how-to-use-shadcnspace-developer-guide

This JSON configuration snippet shows how to manually add the Shadcn Space MCP server to your project's MCP configuration. This allows MCP-enabled editors to discover and utilize Shadcn Space components directly within the IDE, aligning with the local shadcn/ui setup.

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

--------------------------------

### Install Shadcn eCommerce Dashboard Shell 04

Source: https://shadcnspace.com/blocks/dashboard-ui/dashboard-shell

This command installs the 'dashboard-shell-04' component from shadcn, which is designed for eCommerce dashboards. Ensure you have Node.js and npm/yarn installed to use this command.

```bash
npx shadcn@latest add dashboard-shell-04
```
Tokens:
Raw