Comprendre Radix UI et ShadCN UI en 2 minutes : Boostez vos interfaces React !

Salut, créateur d'interfaces React ! 🎨 Aujourd'hui, on plonge dans Radix UI et ShadCN UI, deux bibliothèques essentielles pour créer des composants d'interface utilisateur modernes, accessibles et stylés sans avoir à réinventer la roue. Ce blog est d'ailleurs développé avec Next.js 15, TypeScript, Zod pour la validation des données, et ShadCN UI pour les composants d'interface. Prêt à explorer ?

Radix UI : des composants accessibles par défaut 🎯

Radix UI est une bibliothèque de composants React qui met l'accent sur l'accessibilité et les performances. Chaque composant est optimisé pour le rendu côté serveur (SSR) et respecte les normes ARIA, ce qui en fait un choix idéal pour les applications professionnelles. 🚀

Pourquoi choisir Radix UI ?

• ♿️ Accessibilité WCAG 2.1 intégrée
• 🎯 Zéro dépendance CSS
• 🔄 Support complet du SSR
• ⌨️ Navigation au clavier
• 📱 Support tactile natif
• 🎨 API de style flexible

Installation de Radix UI

Pour démarrer avec Radix UI, installez les composants dont vous avez besoin :

bash
1# Installation d'un composant spécifique
2npm install @radix-ui/react-dialog
3
4# Ou installation de plusieurs composants
5npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip

Exemple d'utilisation : un Dialog accessible

Voici un exemple de Dialog avec gestion du focus et des événements clavier :

typescript
1import * as Dialog from '@radix-ui/react-dialog';
2import { useCallback } from 'react';
3
4export default function MyDialog() {
5  const handleOpenChange = useCallback((open: boolean) => {
6    console.log('Dialog state:', open);
7  }, []);
8
9  return (
10    <Dialog.Root onOpenChange={handleOpenChange}>
11      <Dialog.Trigger asChild>
12        <button className="button-primary">Ouvrir le dialogue</button>
13      </Dialog.Trigger>
14
15      <Dialog.Portal>
16        <Dialog.Overlay className="fixed inset-0 bg-black/50 animate-fade-in" />
17        <Dialog.Content className="dialog-content">
18          <Dialog.Title className="text-xl font-bold">
19            Bienvenue 👋
20          </Dialog.Title>
21          <Dialog.Description className="mt-2">
22            Ce dialogue est entièrement accessible : essayez d'utiliser Tab,
23            Échap, ou les lecteurs d'écran !
24          </Dialog.Description>
25
26          <Dialog.Close asChild>
27            <button className="button-secondary mt-4">
28              Fermer
29            </button>
30          </Dialog.Close>
31        </Dialog.Content>
32      </Dialog.Portal>
33    </Dialog.Root>
34  );
35}

ShadCN UI : Radix UI avec style et bonnes pratiques 🌈

ShadCN UI n'est pas qu'une simple collection de composants stylisés : c'est une boîte à outils complète qui combine Radix UI, Tailwind CSS, et les meilleures pratiques de développement React. Elle inclut notamment :

• 🎨 Des thèmes sombres/clairs
• 🔄 Des animations fluides
• 📱 Un design responsive
• 🎯 Des variants de composants
• ⚡️ Des performances optimisées

Installation de ShadCN UI

bash
1# Installation initiale
2npx shadcn@latest init
3
4# Ajout de composants spécifiques
5npx shadcn@latest add button
6npx shadcn@latest add dialog

Exemple de composant avec ShadCN UI et TypeScript

typescript
1import { Button } from '@/components/ui/button';
2import { useState } from 'react';
3
4interface Props {
5  variant?: 'default' | 'destructive' | 'outline' | 'ghost';
6  children: React.ReactNode;
7}
8
9export default function MyButton({ variant = 'default', children }: Props) {
10  const [loading, setLoading] = useState(false);
11
12  return (
13    <Button
14      variant={variant}
15      disabled={loading}
16      onClick={() => setLoading(true)}
17      className="transition-all hover:scale-105"
18    >
19      {loading ? 'Chargement...' : children}
20    </Button>
21  );
22}

Configuration des thèmes

ShadCN UI permet une personnalisation poussée des thèmes :

typescript
1// tailwind.config.ts
2import { Config } from 'tailwindcss';
3
4export default {
5  darkMode: ['class'],
6  theme: {
7    extend: {
8      colors: {
9        primary: {
10          DEFAULT: 'hsl(var(--primary))',
11          foreground: 'hsl(var(--primary-foreground))',
12        },
13        // Ajoutez vos couleurs personnalisées
14      },
15      keyframes: {
16        'fade-in': {
17          '0%': { opacity: '0' },
18          '100%': { opacity: '1' },
19        },
20      },
21      animation: {
22        'fade-in': 'fade-in 0.2s ease-out',
23      },
24    },
25  },
26} satisfies Config;

Pourquoi choisir cette stack ? 🧐

1. Productivité maximale

   • Composants prêts à l'emploi
   • Typescript intégré
   • Excellente DX (Developer Experience)

2. Performances optimales

   • Bundle size minimale
   • Rendu côté serveur
   • Hydration progressive

3. Maintenabilité

   • Code source accessible
   • Personnalisation facile
   • Communauté active

4. Accessibilité

   • WCAG 2.1 par défaut
   • Tests assistifs
   • Documentation complète

Bonnes pratiques pour votre projet 🚀

1. Organisation des composants

typescript
1// Structurez vos composants par domaine
2src/
3  components/
4    ui/          // Composants ShadCN UI
5    layout/      // Mise en page
6    forms/       // Composants de formulaire
7    features/    // Composants spécifiques

2. Utilisation avec React Hook Form et Zod

typescript
1import { z } from 'zod';
2import { useForm } from 'react-hook-form';
3import { zodResolver } from '@hookform/resolvers/zod';
4
5const schema = z.object({
6  email: z.string().email(),
7  password: z.string().min(8),
8});
9
10type FormData = z.infer<typeof schema>;

En résumé 📝

En deux minutes, nous avons exploré :

• Radix UI pour des composants React accessibles et performants
• ShadCN UI pour un système de design complet basé sur Tailwind
• Les meilleures pratiques d'organisation et d'utilisation
• L'intégration avec TypeScript et Zod

La combinaison de ces outils vous permet de créer des interfaces modernes, accessibles et maintenables, tout en gardant une excellente expérience de développement ! 🎉

Merci d'avoir pris le temps de découvrir Radix UI et ShadCN UI. N'hésitez pas à consulter la documentation officielle de Radix UI et celle de ShadCN UI pour approfondir vos connaissances ! À très vite pour plus de bonnes pratiques React !