Parent : [[INDEX-WEB-UIUX]]

shadcn/ui

Source

• Site : https://ui.shadcn.com/
• Repository : https://github.com/shadcn-ui/ui
• Type : Collection de composants React copiables et personnalisables

Résumé

shadcn/ui propose des composants React "open code" : tu ne les installes pas comme une librairie, tu les copies dans ton projet. Ils sont construits sur Radix UI primitives, Tailwind CSS, et TypeScript. C'est devenu une fondation de facto pour les design systems modernes React/Next.js.

Caractéristiques clés

• Open code : chaque composant est copié dans ton codebase, entièrement personnalisable.
• Basé sur Radix Primitives : accessibilité, focus, keyboard handling gérés.
• Tailwind CSS : styling facilement adaptable au design system.
• TypeScript : typage complet.
• CLI : npx shadcn@latest add <component> pour ajouter un composant.
• Blocks : sections complètes prêtes (analytics, transactions, investments, accounts, etc.).
• Charts : composants graphiques avec Recharts.
• Typeset : système typographique.

Composants disponibles

• Forms : button, input, select, checkbox, radio, switch, slider, textarea
• Layout : card, sheet, dialog, popover, tabs, accordion
• Feedback : alert, toast, skeleton, progress
• Data : table, pagination, badge, avatar
• Navigation : breadcrumb, command, menubar, navigation-menu
• Overlay : dialog, drawer, dropdown-menu, hover-card, tooltip

Quand utiliser

• Projet Next.js / React moderne nécessitant un design system rapidement.
• Tu veux la flexibilité de copier/coller plutôt qu'une dépendance opaque.
• Tu veux une base accessible et bien maintenue.

Références connexes

• [[KNOW-PAT-197]] — Stack Chooser 2026 (recommande shadcn/ui pour SaaS/web app)
• [[KNOW-REF-004]] — Catalogue de galeries d'inspiration web design
• [[KNOW-PAT-144]] — DESIGN.md — mémoire design par projet