Communitygithub.com

shadcnspace/shadcnspace

Bibliothèque de composants UI prêts pour la production avec intégration de serveur MCP, plus de 100 blocs, templates et mises en page de tableaux de bord. Utilisez cette compétence lors de la création d'interfaces modernes avec React et Next.js, de la conception de pages d'atterrissage, de la sélection de mises en page de tableaux de bord, de la création de sections marketing ou du remplacement de composants shadcn/ui génériques par des blocs ShadcnSpace de qualité production.

Qu'est-ce que shadcnspace ?

ShadcnSpace est une distribution et un registre open-source de premier plan de plus de 100 blocs UI Shadcn prêts pour la production, de modèles de pages complètes, de systèmes de tableaux de bord, de sections marketing et de micro-interactions animées, construits avec React, Next.js App Router, Tailwind CSS v4, Base UI et Radix UI. Cette compétence permet aux agents IA (Cursor, Windsurf, Claude Code, Lovable, Bolt, v0) d'inspecter, rechercher et installer des composants d'interface utilisateur directement depuis la session de chat, en utilisant soit la CLI Shadcn, soit le serveur MCP dédié. L'agent peut guider l'utilisateur à travers les quatre étapes rapides de configuration : initialiser Shadcn, configurer le registre @shadcn-space dans components.json, installer les blocs avec des commandes dédiées (Base UI ou Radix UI), et importer les composants copiés dans le projet. La compétence prend en charge la résolution proactive des problèmes courants comme les erreurs 401, les conflits de fichiers ou les incohérences de types, et propose des schémas de prompts structurés pour la composition de pages d'atterrissage complètes ou de sections UI individuelles.

Compatible avec✓Claude Code~Codex CLI✓Cursor✓Windsurf
Part ofDesign & UI
npx skills add https://github.com/shadcnspace/shadcnspace/tree/HEAD/public
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

ShadcnSpace — Compétence Agent IA & Guide Développeur

ShadcnSpace est la distribution et le registre open-source de premier plan de plus de 100 blocs UI Shadcn prêts pour la production, de modèles de pages complètes, de systèmes de tableaux de bord, de sections marketing et de micro-interactions animées, construits avec React, Next.js App Router, Tailwind CSS v4, Base UI et Radix UI.

Démarrage Rapide — Comment Utiliser ShadcnSpace

Suivez ces 4 étapes simples pour commencer à utiliser ShadcnSpace dans n'importe quel projet Next.js ou React :

Étape 1 : Initialiser Shadcn dans Votre Projet

Si votre projet n'a pas encore Shadcn UI configuré :

# Initialiser shadcn UI
npx shadcn@latest init

Astuce : Pour une configuration pré-configurée avec Base UI et Tailwind CSS v4, utilisez le créateur de projet visuel sur https://ui.shadcn.com/create.

Étape 2 : Configurer le Registre dans components.json

Ajoutez le registre officiel @shadcn-space au fichier components.json de votre projet :

Pour les Blocs & Composants Gratuits :

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

Pour les Utilisateurs Pro (Avec Clé de Licence) :

{
  "$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}"
      }
    }
  }
}

Ajoutez [email protected] et LICENSE_KEY=votre-clé dans votre fichier .env ou .env.local.

Étape 3 : Installer les Blocs & Composants

Exécutez la commande d'installation avec votre gestionnaire de paquets pour Base UI ou Radix UI :

# Base UI (Recommandé par défaut)
npx shadcn@latest add @shadcn-space/hero-01

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

Étape 4 : Importer et Utiliser dans Votre Code

Les composants sont copiés directement dans votre dossier src/components/shadcn-space/ avec la propriété complète du code source :

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

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

Base UI vs Radix UI — Guide Complet des Commandes

ShadcnSpace fournit un support à double variante : chaque bloc, composant et page complète est maintenu à la fois avec les primitives Base UI et Radix UI.

Comprendre la Différence

  • Base UI (Recommandé) : La fondation moderne pour shadcn UI. Utilise un package unifié @base-ui/react, des props render explicites au lieu de Slot, et un composant Positioner séparé.
  • Radix UI : La fondation headless classique. Utilise des packages individuels @radix-ui/react-* et la prop asChild avec Slot.

1. Commandes Base UI

Via l'Espace de Noms du Registre (Recommandé — Shadcn CLI v3)

# Blocs & Composants
npx shadcn@latest add @shadcn-space/<nom-de-l-element>

# Exemples :
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

# Pages Complètes :
npx shadcn@latest add @shadcn-space/pages/<nom-de-la-page>
# Exemple :
npx shadcn@latest add @shadcn-space/pages/landing-page-01

Via URL Directe (Shadcn CLI v2 / Solution de Rechange)

# Blocs & Composants
npx shadcn@latest add https://shadcnspace.com/r/<nom-de-l-element>.json

# Pages
npx shadcn@latest add https://shadcnspace.com/r/pages/<nom-de-la-page>.json

2. Commandes Radix UI

Via l'Espace de Noms du Registre (Recommandé — Shadcn CLI v3)

# Blocs & Composants
npx shadcn@latest add @shadcn-space/radix/<nom-de-l-element>

# Exemples :
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

# Pages Complètes :
npx shadcn@latest add @shadcn-space/pages/radix/<nom-de-la-page>
# Exemple :
npx shadcn@latest add @shadcn-space/pages/radix/landing-page-01

Via URL Directe (Shadcn CLI v2 / Solution de Rechange)

# Blocs & Composants
npx shadcn@latest add https://shadcnspace.com/r/radix/<nom-de-l-element>.json

# Pages
npx shadcn@latest add https://shadcnspace.com/r/pages/radix/<nom-de-la-page>.json

3. Syntaxe du Gestionnaire de Paquets

Vous pouvez exécuter n'importe quelle commande d'installation ShadcnSpace avec tous les principaux exécuteurs de paquets :

Gestionnaire de PaquetsSyntaxe de Commande
npmnpx shadcn@latest add @shadcn-space/<nom>
pnpmpnpm dlx shadcn@latest add @shadcn-space/<nom>
bunbunx --bun shadcn@latest add @shadcn-space/<nom>
yarnyarn dlx shadcn@latest add @shadcn-space/<nom>

4. Commandes CLI Avancées

# Installer plusieurs blocs en une seule commande :
npx shadcn@latest add @shadcn-space/navbar-01 @shadcn-space/hero-01 @shadcn-space/footer-01

# Forcer l'écrasement des fichiers existants sans invites de confirmation :
npx shadcn@latest add @shadcn-space/hero-01 --overwrite

Dépannage & Résolution de Problèmes

Si vous rencontrez des problèmes lors de l'installation ou de l'utilisation de ShadcnSpace, utilisez ces correctifs :

1. Problème : "Bloc / Composant Non Trouvé"

  • Cause : Le slug du composant est mal saisi, ou le registre @shadcn-space est manquant dans components.json.
  • Solution :
    1. Vérifiez le nom exact du bloc sur https://shadcnspace.com/blocks.
    2. Confirmez que votre components.json contient : 
      "registries": {
  "@shadcn-space": "https://shadcnspace.com/r/{name}.json"
}
    3. Si vous installez un composant Radix UI, assurez-vous d'ajouter le préfixe radix/ : npx shadcn@latest add @shadcn-space/radix/<nom>.
    4. Si vous installez une page, assurez-vous que le préfixe est pages/ : npx shadcn@latest add @shadcn-space/pages/<nom>.

2. Problème : "Accès Refusé / 401 Non Autorisé / Identifiants Manquants"

  • Cause : Tentative d'installation d'un bloc Pro sans authentification.
  • Solution :
    1. Ajoutez vos identifiants au fichier .env ou .env.local de votre projet : 
      [email protected]
LICENSE_KEY=votre-clé-de-licence
    2. Assurez-vous que votre components.json spécifie les params pour @shadcn-space : 
      "registries": {
  "@shadcn-space": {
    "url": "https://shadcnspace.com/r/{name}.json",
    "params": {
      "email": "${EMAIL}",
      "license_key": "${LICENSE_KEY}"
    }
  }
}
    3. Redémarrez votre terminal ou invite de commande pour que les variables d'environnement prennent effet.

3. Problème : Incompatibilité de Type Primitives / TypeScript (Base UI vs Radix UI)

  • Cause : Utilisation d'un bloc Radix UI dans un projet qui n'a que Base UI installé, ou vice-versa.
  • Symptômes : Module not found: Can't resolve '@radix-ui/react-...' ou Cannot find module '@base-ui/react'.
  • Solution :
    • Si votre projet utilise Base UI : installez la variante Base UI standard (@shadcn-space/<nom>). Assurez-vous que @base-ui/react est installé (pnpm add @base-ui/react).
    • Si votre projet utilise Radix UI : installez la variante Radix (@shadcn-space/radix/<nom>). Assurez-vous que les packages @radix-ui/react-* requis sont présents.
    • Pour migrer un projet existant de Radix vers Base UI, suivez le Guide de Migration.

4. Problème : Invite ou Conflit "Le fichier existe déjà"

  • Cause : Le composant ou un fichier de dépendance sous-jacent a déjà été installé.
  • Solution : Passez le flag --overwrite : 
    npx shadcn@latest add @shadcn-space/hero-01 --overwrite

5. Problème : Style Cassé ou Couleurs Manquantes

  • Cause : Jetons de couleur sémantiques manquants (--background, --foreground, --primary, --border, etc.) dans globals.css.
  • Solution : ShadcnSpace utilise des jetons de variables CSS standards. Assurez-vous que votre globals.css ou le @theme de Tailwind CSS v4 inclut des jetons de design sémantiques. Ne codez pas en dur des codes hexadécimaux arbitraires.

6. Problème : components.json Non Trouvé

  • Cause : Le projet n'a pas encore été initialisé avec la CLI shadcn.
  • Solution : Exécutez d'abord npx shadcn@latest init à la racine de votre projet.

Documentation & Répertoire d'Aide

Lorsque vous avez besoin de documentation détaillée, de guides ou d'assistance, visitez ces pages de documentation officielle :

Guide / RessourceURLCe que Vous Trouverez
Introduction au Démarragehttps://shadcnspace.com/docs/getting-started/introductionAperçu, philosophie et introduction du dépôt
Guide d'Installation CLIhttps://shadcnspace.com/docs/getting-started/how-to-use-shadcn-cliProcédure complète de la CLI, v3 vs v2, guide vidéo et dépannage
Migration de Radix UI vers Base UIhttps://shadcnspace.com/docs/getting-started/migrate-to-baseuiGuide étape par étape pour migrer le code de asChild vers render et Positioner
Guide de Configuration du Serveur MCPhttps://shadcnspace.com/docs/getting-started/mcp-server-docsConfiguration de Cursor, Windsurf, Claude Code et autres IDE IA
Guide d'Utilisation des Composantshttps://shadcnspace.com/docs/getting-started/componentPrimitives UI, boutons, menus déroulants, boîtes de dialogue, champs de saisie
Guide des Blocshttps://shadcnspace.com/docs/getting-started/blocksMarketing, hero, tarification, témoignages, grilles bento et tableaux de bord
Guide de Sollicitation IAhttps://shadcnspace.com/docs/getting-started/copy-promptPrompts pour les pages d'atterrissage en un seul passage et la composition de tableaux de bord
Constructeur CLI Interactifhttps://shadcnspace.com/cliConstructeur de commandes visuel personnalisé pour les styles, les thèmes et les icônes
Guide Ouvrir dans v0https://shadcnspace.com/docs/getting-started/open-v0Ouverture et personnalisation des blocs ShadcnSpace dans v0
Galerie Interactive de Blocshttps://shadcnspace.com/blocksAperçu visuel en direct et copie du code pour les 100+ blocs
Catalogue de Composantshttps://shadcnspace.com/componentsMicro-interactions, texte animé, dock, marquee
Modèles de Pages Complèteshttps://shadcnspace.com/templatesModèles de pages prêts pour la production complets
Problèmes GitHub & Communautéhttps://github.com/shadcnspace/shadcnspace/issuesRapports de bogues, demandes de fonctionnalités et discussions communautaires

Intégration du Serveur MCP ShadcnSpace

Connectez le serveur MCP officiel de ShadcnSpace à votre IDE IA (Cursor, Windsurf, Claude Code, Lovable, Bolt, ou v0) pour inspecter, rechercher et installer des blocs UI directement dans votre session de chat.

Configuration de Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "shadcnspace": {
      "url": "https://mcp.shadcnspace.com/mcp",
      "headers": {
        "Authorization": "Bearer [email protected]:votre-clé-de-licence"
      }
    }
  }
}

(Les utilisateurs du niveau gratuit peuvent omettre le champ headers ; les blocs gratuits s'installent sans authentification).

Configuration de Windsurf

Dans Paramètres Windsurf → Serveurs MCP, ajoutez :

  • URL du Serveur : https://mcp.shadcnspace.com/mcp
  • Autorisation : Bearer [email protected]:votre-clé-de-licence

Configuration de Claude Code

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

Configuration de Lovable & Bolt

  • URL du Serveur : https://mcp.shadcnspace.com/mcp
  • Transport : HTTP
  • Auth : Jeton Bearer [email protected]:votre-clé-de-licence

Outils MCP Disponibles

OutilObjectif
searchBlocksRechercher des blocs par mots-clés (ex. hero, pricing, stats, sidebar)
listBlocksLister tous les blocs disponibles dans ShadcnSpace
getBlockInstallRetourne la commande CLI exacte pour installer un bloc (Base UI ou Radix UI)
searchPagesRechercher des modèles de pages complètes
getPageInstallRetourne la commande d'installation pour une page complète
listInstalledBlocksInspecter les blocs déjà installés dans le projet actuel
get_audit_checklistRetourne une liste de contrôle d'accessibilité, de thématisation et de conception responsive

Schémas d'Utilisation & Prompts pour l'Agent

Lorsque vous sollicitez un agent IA dans Cursor, Claude Code ou Windsurf, utilisez ces schémas structurés :

Génération d'un Bloc Unique

Ajoute une section hero à fort taux de conversion pour mon SaaS en utilisant ShadcnSpace Hero 01 (Base UI).

Crée une section de tarification avec un bouton bascule mensuel/annuel en utilisant ShadcnSpace Radix UI Pricing 01.

Ajoute une barre latérale d'administration et des cartes de statistiques en utilisant les blocs Dashboard de ShadcnSpace.

Composition d'une Page d'Atterrissage Complète (En Un Seul Passage)

Construis une page d'atterrissage SaaS complète en utilisant les blocs ShadcnSpace :
- Barre de navigation : Barre de navigation glassmorphique collante de ShadcnSpace
- Hero : Hero 01 avec badge interactif et aperçu vidéo
- Fonctionnalités : Grille Bento 01 avec micro-animations
- Preuve Sociale : Marquee de témoignages de ShadcnSpace
- Tarification : Tarification 01 avec 3 niveaux et facturation mensuelle

[Le reste du prompt est tronqué pour la traduction]

Skills associés

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