Shadcn/ui

Shadcn/ui représente une approche innovante des bibliothèques de composants UI en proposant non pas un package npm traditionnel, mais une collection de composants que vous copiez directement dans votre projet. Construit sur Radix UI pour l'accessibilité et Tailwind CSS pour le styling, il offre aux développeurs un contrôle total sur leur code tout en accélérant significativement le développement d'interfaces modernes.

Fondements

• Composants copiables directement dans votre codebase plutôt qu'installés via npm
• Architecture basée sur Radix UI pour les primitives accessibles et Tailwind CSS pour le styling
• Personnalisation complète grâce à la propriété du code source
• Système de design cohérent avec variables CSS et tokens de design réutilisables

Avantages

• Propriété totale du code : aucune dépendance externe à maintenir pour les composants UI
• Personnalisation illimitée : modification directe du code selon vos besoins spécifiques
• Bundle optimisé : inclusion uniquement des composants utilisés sans overhead
• Accessibilité native : composants conformes WCAG grâce à Radix UI
• Developer Experience excellente : CLI intégré pour ajouter des composants en une commande
• TypeScript natif : typage complet et autocomplétion intelligente
• Performance optimale : pas de runtime supplémentaire, code compilé directement

Exemple concret

Installation et utilisation d'un composant Button avec Shadcn/ui :

# Installation initiale de Shadcn/ui dans votre projet
npx shadcn-ui@latest init

# Ajout du composant Button
npx shadcn-ui@latest add button

// components/ui/button.tsx (généré dans votre projet)
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent",
        ghost: "hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)

Button.displayName = "Button"

export { Button, buttonVariants }

// Utilisation dans votre application
import { Button } from "@/components/ui/button"

export function Dashboard() {
  return (
    <div className="space-y-4">
      <Button>Default Button</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline" size="lg">Large Outline</Button>
      <Button variant="ghost" size="sm">Small Ghost</Button>
    </div>
  )
}

Mise en œuvre

1. Installer les dépendances de base : React, Tailwind CSS, et les utilitaires requis (class-variance-authority, clsx)
2. Exécuter la commande d'initialisation 'npx shadcn-ui@latest init' pour configurer le projet
3. Configurer le fichier components.json avec vos préférences de chemins et de style
4. Ajouter les composants nécessaires avec 'npx shadcn-ui@latest add [component-name]'
5. Personnaliser les variables CSS dans votre fichier globals.css pour définir votre palette
6. Modifier directement les composants générés selon vos besoins spécifiques
7. Créer vos propres variantes en étendant les buttonVariants ou autres helpers

Outils associés

• Radix UI : bibliothèque de primitives accessibles utilisée comme foundation
• Tailwind CSS : framework CSS utility-first pour le styling des composants
• Class Variance Authority (CVA) : utilitaire pour créer des variants de composants type-safe
• Lucide React : bibliothèque d'icônes recommandée et parfaitement intégrée
• React Hook Form : pour la gestion des formulaires avec les composants Shadcn/ui
• Zod : validation de schémas souvent utilisée avec les formulaires Shadcn/ui

Shadcn/ui révolutionne l'approche des bibliothèques de composants en donnant aux développeurs la propriété complète de leur code UI. Cette philosophie copy-paste-own élimine les contraintes des packages npm traditionnels tout en maintenant une cohérence de design et une accessibilité de premier ordre. Pour les équipes cherchant flexibilité, performance et contrôle total, Shadcn/ui représente une solution moderne qui accélère le développement sans compromis sur la qualité.