Communitygithub.com

shadcnspace/shadcnspace

Produktive UI-Komponentenbibliothek mit MCP-Server-Integration, über 100 Blöcken, Vorlagen und Dashboard-Layouts. Verwenden Sie diese Fähigkeit beim Erstellen moderner React- und Next.js-Benutzeroberflächen, beim Entwerfen von Landingpages, beim Auswählen von Dashboard-Layouts, beim Erstellen von Marketingabschnitten oder beim Ersetzen generischer Shadcn/ui-Komponenten durch produktionsreife ShadcnSpace-Blöcke.

Was ist shadcnspace?

ShadcnSpace ist eine umfassende Open-Source-Distribution und Registrierung von über 100 produktionsreifen Shadcn-UI-Blöcken, vollständigen Seitenvorlagen, Dashboard-Systemen, Marketingabschnitten und animierten Mikrointeraktionen, die mit React, Next.js App Router, Tailwind CSS v4, Base UI und Radix UI erstellt wurden. Es bietet Dual-Variant-Unterstützung (Base UI und Radix UI), sodass Entwickler die bevorzugte Grundlage für ihre Projekte wählen können. Die Integration in KI-gesteuerte Entwicklungsumgebungen erfolgt über einen MCP-Server (Model Context Protocol), der es KI-Agenten wie Cursor, Windsurf, Claude Code und Lovable ermöglicht, UI-Blöcke direkt über Chat-Sitzungen zu durchsuchen, zu suchen und zu installieren. Das Skill-Dokument enthält detaillierte Anweisungen zu Schnellstart, Befehlsreferenzen, Fehlerbehebung und MCP-Einrichtung, was es zu einem unverzichtbaren Werkzeug für die moderne React- und Next.js-Entwicklung macht.

Funktioniert mit✓Claude Code~Codex CLI✓Cursor✓Windsurf
Part ofDesign & UI
npx skills add https://github.com/shadcnspace/shadcnspace/tree/HEAD/public
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

ShadcnSpace — KI-Agenten-Fähigkeit & Entwicklerleitfaden

ShadcnSpace ist die führende Open-Source-Distribution und Registrierung von über 100 produktionsreifen Shadcn-UI-Blöcken, vollständigen Seitenvorlagen, Dashboard-Systemen, Marketingabschnitten und animierten Mikrointeraktionen, die mit React, Next.js App Router, Tailwind CSS v4, Base UI und Radix UI erstellt wurden.

Schnellstart — So verwenden Sie ShadcnSpace

Befolgen Sie diese 4 einfachen Schritte, um ShadcnSpace in jedem Next.js- oder React-Projekt zu verwenden:

Schritt 1: Initialisieren Sie Shadcn in Ihrem Projekt

Falls Ihr Projekt noch kein Shadcn-UI konfiguriert hat:

# Shadcn-UI initialisieren
npx shadcn@latest init

Tipp: Für ein vorkonfiguriertes Setup mit Base UI und Tailwind CSS v4 verwenden Sie den visuellen Projekt-Ersteller unter https://ui.shadcn.com/create.

Schritt 2: Konfigurieren Sie die Registrierung in components.json

Fügen Sie die offizielle @shadcn-space-Registrierung zu Ihrer components.json-Datei hinzu:

Für kostenlose Blöcke & Komponenten:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "registries": {
    "@shadcn-space": "https://shadcnspace.com/r/{name}.json"
  }
}

Für Pro-Benutzer (mit Lizenzschlüssel):

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

Fügen Sie [email protected] und LICENSE_KEY=your-key in Ihre .env- oder .env.local-Datei ein.

Schritt 3: Installieren Sie Blöcke & Komponenten

Führen Sie den Installationsbefehl mit Ihrem Paketmanager aus, entweder für Base UI oder Radix UI:

# Base UI (Empfohlener Standard)
npx shadcn@latest add @shadcn-space/hero-01

# Radix UI
npx shadcn@latest add @shadcn-space/radix/hero-01

Schritt 4: Importieren und verwenden Sie im Code

Komponenten werden direkt in Ihren src/components/shadcn-space/-Ordner kopiert, mit vollständigem Quellcode-Besitz:

import Hero01 from "@/components/shadcn-space/hero-01";

export default function LandingPage() {
  return (
    <main>
      <Hero01 />
    </main>
  );
}

Base UI vs. Radix UI — Vollständige Befehlsreferenz

ShadcnSpace bietet Dual-Varianten-Unterstützung: Jeder Block, jede Komponente und jede volle Seite wird sowohl in Base UI- als auch in Radix UI-Primitiven gepflegt.

Den Unterschied verstehen

  • Base UI (Empfohlen): Das moderne Fundament für Shadcn-UI. Verwendet ein einheitliches @base-ui/react-Paket, explizite render-Props anstelle von Slot und eine separate Positioner-Komponente.
  • Radix UI: Die klassische Headless-Grundlage. Verwendet einzelne @radix-ui/react-*-Pakete und die asChild-Eigenschaft mit Slot.

1. Base UI-Befehle

Über den Registrierungs-Namespace (Empfohlen — Shadcn CLI v3)

# Blöcke & Komponenten
npx shadcn@latest add @shadcn-space/<item-name>

# Beispiele:
npx shadcn@latest add @shadcn-space/hero-01
npx shadcn@latest add @shadcn-space/bento-grid-01
npx shadcn@latest add @shadcn-space/button-06
npx shadcn@latest add @shadcn-space/pricing-01
npx shadcn@latest add @shadcn-space/sidebar-01

# Ganze Seiten:
npx shadcn@latest add @shadcn-space/pages/<page-name>
# Beispiel:
npx shadcn@latest add @shadcn-space/pages/landing-page-01

Über direkte URL (Shadcn CLI v2 / Fallback)

# Blöcke & Komponenten
npx shadcn@latest add https://shadcnspace.com/r/<item-name>.json

# Seiten
npx shadcn@latest add https://shadcnspace.com/r/pages/<page-name>.json

2. Radix UI-Befehle

Über den Registrierungs-Namespace (Empfohlen — Shadcn CLI v3)

# Blöcke & Komponenten
npx shadcn@latest add @shadcn-space/radix/<item-name>

# Beispiele:
npx shadcn@latest add @shadcn-space/radix/hero-01
npx shadcn@latest add @shadcn-space/radix/bento-grid-01
npx shadcn@latest add @shadcn-space/radix/button-06
npx shadcn@latest add @shadcn-space/radix/pricing-01
npx shadcn@latest add @shadcn-space/radix/sidebar-01

# Ganze Seiten:
npx shadcn@latest add @shadcn-space/pages/radix/<page-name>
# Beispiel:
npx shadcn@latest add @shadcn-space/pages/radix/landing-page-01

Über direkte URL (Shadcn CLI v2 / Fallback)

# Blöcke & Komponenten
npx shadcn@latest add https://shadcnspace.com/r/radix/<item-name>.json

# Seiten
npx shadcn@latest add https://shadcnspace.com/r/pages/radix/<page-name>.json

3. Paketmanager-Syntax

Sie können jeden ShadcnSpace-Installationsbefehl mit allen gängigen Paketmanagement-Tools ausführen:

PaketmanagerBefehlssyntax
npmnpx shadcn@latest add @shadcn-space/<name>
pnpmpnpm dlx shadcn@latest add @shadcn-space/<name>
bunbunx --bun shadcn@latest add @shadcn-space/<name>
yarnyarn dlx shadcn@latest add @shadcn-space/<name>

4. Erweiterte CLI-Befehle

# Mehrere Blöcke mit einem Befehl installieren:
npx shadcn@latest add @shadcn-space/navbar-01 @shadcn-space/hero-01 @shadcn-space/footer-01

# Vorhandene Dateien ohne Bestätigungsaufforderung überschreiben:
npx shadcn@latest add @shadcn-space/hero-01 --overwrite

Fehlerbehebung & Problemlösung

Wenn bei der Installation oder Verwendung von ShadcnSpace Probleme auftreten, verwenden Sie diese Lösungen:

1. Problem: „Block / Komponente nicht gefunden"

  • Ursache: Der Komponenten-Slug ist falsch geschrieben oder die @shadcn-space-Registrierung fehlt in components.json.
  • Lösung:
    1. Überprüfen Sie den genauen Blocknamen unter https://shadcnspace.com/blocks.
    2. Stellen Sie sicher, dass Ihre components.json Folgendes enthält: 
      "registries": {
  "@shadcn-space": "https://shadcnspace.com/r/{name}.json"
}
    3. Wenn Sie eine Radix-UI-Komponente installieren, stellen Sie sicher, dass Sie radix/ voranstellen: npx shadcn@latest add @shadcn-space/radix/<name>.
    4. Wenn Sie eine Seite installieren, stellen Sie sicher, dass das Präfix pages/ ist: npx shadcn@latest add @shadcn-space/pages/<name>.

2. Problem: „Zugriff verweigert / 401 Nicht autorisiert / Fehlende Anmeldedaten"

  • Ursache: Versuch, einen Pro-Block ohne Authentifizierung zu installieren.
  • Lösung:
    1. Fügen Sie Ihre Anmeldedaten zur .env- oder .env.local-Datei Ihres Projekts hinzu: 
      [email protected]
LICENSE_KEY=your-license-key
    2. Stellen Sie sicher, dass Ihre components.json params für @shadcn-space angibt: 
      "registries": {
  "@shadcn-space": {
    "url": "https://shadcnspace.com/r/{name}.json",
    "params": {
      "email": "${EMAIL}",
      "license_key": "${LICENSE_KEY}"
    }
  }
}
    3. Starten Sie Ihr Terminal oder Ihre Eingabeaufforderung neu, damit die Umgebungsvariablen wirksam werden.

3. Problem: Primitive / TypeScript-Typinkonsistenz (Base UI vs. Radix UI)

  • Ursache: Verwendung eines Radix-UI-Blocks in einem Projekt, das nur Base UI installiert hat, oder umgekehrt.
  • Symptome: Module not found: Can't resolve '@radix-ui/react-...' oder Cannot find module '@base-ui/react'.
  • Lösung:
    • Wenn Ihr Projekt Base UI verwendet: Installieren Sie die Standard-Base-UI-Variante (@shadcn-space/<name>). Stellen Sie sicher, dass @base-ui/react installiert ist (pnpm add @base-ui/react).
    • Wenn Ihr Projekt Radix UI verwendet: Installieren Sie die Radix-Variante (@shadcn-space/radix/<name>). Stellen Sie sicher, dass die erforderlichen @radix-ui/react-*-Pakete vorhanden sind.
    • Um ein vorhandenes Projekt von Radix zu Base UI zu migrieren, folgen Sie dem Migrationsleitfaden.

4. Problem: „Datei existiert bereits"-Aufforderung oder Konflikt

  • Ursache: Die Komponente oder eine zugrunde liegende Abhängigkeitsdatei wurde bereits installiert.
  • Lösung: Übergeben Sie die --overwrite-Flag: 
    npx shadcn@latest add @shadcn-space/hero-01 --overwrite

5. Problem: Fehlerhaftes Styling oder fehlende Farben

  • Ursache: Fehlende semantische Farb-Tokens (--background, --foreground, --primary, --border, etc.) in globals.css.
  • Lösung: ShadcnSpace verwendet standardmäßige CSS-Variablen-Tokens. Stellen Sie sicher, dass Ihre globals.css oder Ihr Tailwind CSS v4 @theme semantische Design-Tokens enthält. Härten Sie keine willkürlichen Hex-Codes ein.

6. Problem: components.json nicht gefunden

  • Ursache: Das Projekt wurde noch nicht mit der Shadcn-CLI initialisiert.
  • Lösung: Führen Sie zuerst npx shadcn@latest init im Stammverzeichnis Ihres Projekts aus.

Dokumentations- & Hilfeverzeichnis

Wenn Sie detaillierte Dokumentation, Anleitungen oder Unterstützung benötigen, besuchen Sie diese offiziellen Dokumentationsseiten:

Leitfaden / RessourceURLWas Sie finden werden
Einführung – Erste Schrittehttps://shadcnspace.com/docs/getting-started/introductionÜberblick, Philosophie und Repository-Einführung
CLI-Installationsanleitunghttps://shadcnspace.com/docs/getting-started/how-to-use-shadcn-cliVollständiger CLI-Durchlauf, v3 vs. v2, Videoanleitung und Fehlerbehebung
Migration von Radix UI zu Base UIhttps://shadcnspace.com/docs/getting-started/migrate-to-baseuiSchritt-für-Schritt-Anleitung zur Migration von asChild zu render und Positioner
MCP-Server-Setup-Anleitunghttps://shadcnspace.com/docs/getting-started/mcp-server-docsKonfiguration von Cursor, Windsurf, Claude Code und anderen KI-IDEs
Anleitung zur Komponentenverwendunghttps://shadcnspace.com/docs/getting-started/componentUI-Primitive, Schaltflächen, Dropdowns, Dialoge, Eingabefelder
Blöcke-Anleitunghttps://shadcnspace.com/docs/getting-started/blocksMarketing, Hero, Preise, Testimonials, Bento-Grids und Dashboards
Anleitung zur KI-Aufforderunghttps://shadcnspace.com/docs/getting-started/copy-promptAufforderungen für einmalige Landingpages und Dashboard-Komposition
Interaktiver CLI-Builderhttps://shadcnspace.com/cliBenutzerdefinierter visueller Befehlsersteller für Stile, Designs und Symbole
Öffnen in v0-Anleitunghttps://shadcnspace.com/docs/getting-started/open-v0Öffnen und Anpassen von ShadcnSpace-Blöcken in v0
Interaktive Blockgaleriehttps://shadcnspace.com/blocksVisuelle Live-Vorschau und Code-Kopie für alle über 100 Blöcke
Komponentenkataloghttps://shadcnspace.com/componentsMikrointeraktionen, animierter Text, Dock, Laufband
Ganzseitige Vorlagenhttps://shadcnspace.com/templatesVollständige, produktionsreife Seitenvorlagen
GitHub Issues & Communityhttps://github.com/shadcnspace/shadcnspace/issuesFehlermeldungen, Funktionsanfragen und Community-Diskussionen

ShadcnSpace MCP-Server-Integration

Verbinden Sie den offiziellen ShadcnSpace MCP-Server mit Ihrer KI-IDE (Cursor, Windsurf, Claude Code, Lovable, Bolt oder v0), um UI-Blöcke direkt in Ihrer Chat-Sitzung zu inspizieren, zu durchsuchen und zu installieren.

Cursor-Setup (~/.cursor/mcp.json)

{
  "mcpServers": {
    "shadcnspace": {
      "url": "https://mcp.shadcnspace.com/mcp",
      "headers": {
        "Authorization": "Bearer [email protected]:your-license-key"
      }
    }
  }
}

(Free-Tier-Benutzer können das headers-Feld weglassen; kostenlose Blöcke werden ohne Authentifizierung installiert).

Windsurf-Setup

Fügen Sie in Windsurf Settings → MCP Servers hinzu:

  • Server-URL: https://mcp.shadcnspace.com/mcp
  • Autorisierung: Bearer [email protected]:your-license-key

Claude Code-Setup

claude mcp add shadcnspace https://mcp.shadcnspace.com/mcp

Lovable & Bolt-Setup

  • Server-URL: https://mcp.shadcnspace.com/mcp
  • Transport: HTTP
  • Auth: Bearer-Token [email protected]:your-license-key

Verfügbare MCP-Tools

ToolZweck
searchBlocksDurchsucht Blöcke nach Schlüsselwörtern (z. B. hero, pricing, stats, sidebar)
listBlocksListet alle verfügbaren Blöcke in ShadcnSpace auf
getBlockInstallGibt den genauen CLI-Befehl zur Installation eines Blocks zurück (Base UI oder Radix UI)
searchPagesDurchsucht ganzseitige Vorlagen
getPageInstallGibt den Installationsbefehl für eine vollständige Seite zurück
listInstalledBlocksÜberprüft bereits im aktuellen Projekt installierte Blöcke
get_audit_checklistGibt eine Checkliste für Barrierefreiheit, Theming und responsives Design zurück

Agenten-Verwendungsmuster & Aufforderungen

Wenn Sie einen KI-Agenten in Cursor, Claude Code oder Windsurf auffordern, verwenden Sie diese strukturierten Muster:

Einzelblock-Generierung

Fügen Sie einen konversionsstarken Hero-Bereich für mein SaaS mit ShadcnSpace Hero 01 (Base UI) hinzu.

Erstellen Sie einen Preisbereich mit monatlichem und jährlichem Umschalter mit ShadcnSpace Radix UI Pricing 01.

Fügen Sie eine Admin-Seitenleiste und Statistik-Karten mit ShadcnSpace Dashboard-Blöcken hinzu.

Komplette Landingpage-Komposition (Ein Durchlauf)

Erstellen Sie eine vollständige SaaS-Landingpage mit ShadcnSpace-Blöcken:
- Navbar: Klebrige glasomorphe Navbar von ShadcnSpace
- Hero: Hero 01 mit interaktivem Badge und Videovorschau
- Features: Bento Grid 01 mit Mikroanimationen
- Social Proof: Testimonial-Marquee von ShadcnSpace
- Pricing: Pricing 01 mit 3 Stufen und Abrechnungsumschaltung
- Footer: Footer 01 mit mehrspaltigem Layout

Verwenden Sie Base UI-Varianten. Befolgen Sie die shadcn/ui-Namenskonventionen und exportieren Sie jede Komponente als Standard-Export aus `@/components/shadcn-space/`.

Dashboard-Zusammenstellung

Erstellen Sie ein Produktanalyse-Dashboard mit ShadcnSpace Dashboard-Blöcken:
- Sidebar: Sidebar 01 mit Navigationslinks für Dashboard, Analysen, Einstellungen
- Header: Top-Navigationsleiste mit Benutzerprofil-Menü und Benachrichtigungen
- Übersichtskarten: Statistik-Karten für wöchentliche aktive Benutzer, Umsatz, Abschlussrate
- Datentabellen: Voll ausgestattete Tabelle mit Paginierung und Suchleiste
- Diagramme: Liniendiagramm und Balkendiagramm mit monatlichen Trends

Block-Anpassungsaufforderung

Überprüfen Sie den soeben installierten Hero-01-Block in `src/components/shadcn-space/hero-01.tsx`. Ändern Sie die Hintergrundfarbe auf `bg-gradient-to-br from-blue-50 to-indigo-100`, ersetzen Sie den Platzhaltertext durch „Beschleunigen Sie Ihr Team" und fügen Sie einen sekundären CTA-Button „Mehr erfahren" hinzu, der auf `/features` verweist.

Lizenzierung

ShadcnSpace ist unter der MIT-Lizenz lizenziert — mit Ausnahme der Pro-Blöcke und Premium-Vorlagen, die einen kostenpflichtigen Lizenzschlüssel erfordern.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community