Communitygithub.com

vercel-labs/shadcn

Name: vercel-labs/shadcn
Author: Community

Composants shadcn/ui pré-construits pour json-render. À utiliser avec @json-render/shadcn pour ajouter des composants d'interface utilisateur standard à un catalogue ou construire des interfaces web avec des composants Radix UI + Tailwind CSS.

Qu'est-ce que shadcn ?

Cette compétence fournit des composants shadcn/ui pré-intégrés spécialement conçus pour fonctionner avec la bibliothèque @json-render/shadcn. Elle permet aux développeurs d'ajouter facilement des composants d'interface standard (boutons, champs de saisie, cartes, dialogues, etc.) à leurs catalogues d'UI sans avoir à les configurer individuellement. Basée sur Radix UI pour l'accessibilité et l'interactivité, et stylisée avec Tailwind CSS, elle simplifie la création d'interfaces web modernes et réactives. Idéale pour les agents IA travaillant avec des environnements comme Claude Code, VSCode ou des outils de développement, cette compétence accélère l'intégration de composants UI tout en respectant les conventions de shadcn/ui.

Compatible avec~Claude Code~Codex CLI~Cursor

Part ofDesign & UI

npx skills add https://github.com/vercel-labs/json-render/tree/main/skills/shadcn

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.

ChatGPT Claude Gemini Grok Perplexity DeepSeek

Documentation

Que fait shadcn ?

Utilisation

# Ajouter un composant au catalogue
npx json-render add shadcn/button

# Liste des composants disponibles
npx json-render list shadcn

Composants supportés

Button - Boutons avec différents styles et variantes
Input - Champs de saisie de texte
Card - Cartes pour afficher du contenu structuré
Dialog - Fenêtres modales accessibles
DropdownMenu - Menus déroulants interactifs
Form - Gestion de formulaires avec validation
Table - Tableaux de données réactifs

Configuration

Assurez-vous d'avoir installé les dépendances suivantes :

npm install @json-render/shadcn

Ressources

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

vercel-labs/core

Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.

vercel-labs/react

React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.

vercel-labs/react-native

React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs from JSON, creating mobile component catalogs, or rendering AI-generated specs on mobile.

vercel-labs/react-pdf

React PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF buffers/streams/files.

vercel-labs/react-three-fiber

React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs.

vercel-labs/remotion

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from JSON, creating video catalogs, or rendering AI-generated video timelines.

vercel-labs/zustand

Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.