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

Exemple d'utilisation : un Dialog accessible

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

typescript

Radix UI est unopinionated sur le style, ce qui vous permet de l'intégrer parfaitement avec n'importe quel système de design, que ce soit Tailwind CSS, CSS Modules, ou Styled Components.

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

Exemple de composant avec ShadCN UI et TypeScript

typescript

Configuration des thèmes

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

typescript

Pourquoi choisir cette stack ? 🧐

Productivité maximale
- Composants prêts à l'emploi
- Typescript intégré
- Excellente DX (Developer Experience)
Performances optimales
- Bundle size minimale
- Rendu côté serveur
- Hydration progressive
Maintenabilité
- Code source accessible
- Personnalisation facile
- Communauté active
Accessibilité
- WCAG 2.1 par défaut
- Tests assistifs
- Documentation complète

Bonnes pratiques pour votre projet 🚀

Organisation des composants

typescript

Utilisation avec React Hook Form et Zod

typescript

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 !

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

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}

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

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}

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;

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

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>;