Verstehe Radix UI und ShadCN UI in 2 Minuten: Optimiere deine React-Interfaces!

Hallo React-Interface-Entwickler! 🎨 Heute tauchen wir ein in Radix UI und ShadCN UI, zwei essenzielle Bibliotheken zur Erstellung moderner, barrierefreier und stilvoller UI-Komponenten, ohne das Rad neu erfinden zu müssen. Dieser Blog wurde übrigens mit Next.js 15, TypeScript, Zod für die Datenvalidierung und ShadCN UI für die Interface-Komponenten entwickelt. Bereit zum Erkunden?

Radix UI: Von Haus aus barrierefreie Komponenten 🎯

Radix UI ist eine React-Komponentenbibliothek, die Barrierefreiheit und Leistung in den Vordergrund stellt. Jede Komponente ist für Server-Side Rendering (SSR) optimiert und entspricht den ARIA-Standards, was sie zur idealen Wahl für professionelle Anwendungen macht. 🚀

Warum Radix UI wählen?

♿️ Integrierte WCAG 2.1 Barrierefreiheit
🎯 Keine CSS-Abhängigkeiten
🔄 Volle SSR-Unterstützung
⌨️ Tastaturnavigation
📱 Native Touch-Unterstützung
🎨 Flexible Styling-API

Installation von Radix UI

So beginnst du mit Radix UI, installiere die benötigten Komponenten:

bash

Beispiel: Ein barrierefreier Dialog

Hier ist ein Beispiel eines Dialog mit Fokus-Management und Tastaturereignissen:

typescript

Radix UI ist unvoreingenommen bezüglich des Stylings, was eine perfekte Integration mit jedem Design-System ermöglicht, sei es Tailwind CSS, CSS Modules oder Styled Components.

ShadCN UI: Radix UI mit Stil und Best Practices 🌈

ShadCN UI ist nicht nur eine Sammlung gestylter Komponenten: Es ist ein komplettes Toolkit, das Radix UI, Tailwind CSS und React-Entwicklungs-Best-Practices kombiniert. Es enthält:

🎨 Dunkel/Hell-Themes
🔄 Flüssige Animationen
📱 Responsives Design
🎯 Komponenten-Varianten
⚡️ Optimierte Leistung

Installation von ShadCN UI

bash

Komponenten-Beispiel mit ShadCN UI und TypeScript

typescript

Theme-Konfiguration

ShadCN UI ermöglicht fortgeschrittene Theme-Anpassungen:

typescript

Warum diesen Stack wählen? 🧐

Maximale Produktivität
- Sofort einsetzbare Komponenten
- Integriertes TypeScript
- Hervorragende DX (Developer Experience)
Optimale Leistung
- Minimale Bundle-Größe
- Server-seitiges Rendering
- Progressive Hydration
Wartbarkeit
- Zugänglicher Quellcode
- Einfache Anpassung
- Aktive Community
Barrierefreiheit
- WCAG 2.1 standardmäßig
- Assistive Tests
- Vollständige Dokumentation

Best Practices für dein Projekt 🚀

Komponenten-Organisation

typescript

Verwendung mit React Hook Form und Zod

typescript

Zusammenfassung 📝

In zwei Minuten haben wir erkundet:

Radix UI für barrierefreie und leistungsfähige React-Komponenten
ShadCN UI für ein komplettes Tailwind-basiertes Design-System
Best Practices für Organisation und Verwendung
Integration mit TypeScript und Zod

Die Kombination dieser Tools ermöglicht es dir, moderne, barrierefreie und wartbare Interfaces zu erstellen und dabei eine hervorragende Entwicklungserfahrung zu genießen! 🎉

Vielen Dank, dass du dir die Zeit genommen hast, Radix UI und ShadCN UI kennenzulernen. Schaue dir gerne die offizielle Radix UI-Dokumentation und die ShadCN UI-Dokumentation an, um dein Wissen zu vertiefen! Bis bald für weitere React Best Practices!

1# Installation einer spezifischen Komponente
2npm install @radix-ui/react-dialog
3
4# Oder Installation mehrerer Komponenten
5npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip

1# Erstinstallation
2npx shadcn@latest init
3
4# Hinzufügen spezifischer Komponenten
5npx shadcn@latest add button
6npx shadcn@latest add dialog

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-Status:', open);
7  }, []);
8
9  return (
10    <Dialog.Root onOpenChange={handleOpenChange}>
11      <Dialog.Trigger asChild>
12        <button className="button-primary">Dialog öffnen</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            Willkommen 👋
20          </Dialog.Title>
21          <Dialog.Description className="mt-2">
22            Dieser Dialog ist vollständig barrierefrei: Probiere Tab,
23            Escape oder Screenreader aus!
24          </Dialog.Description>
25
26          <Dialog.Close asChild>
27            <button className="button-secondary mt-4">
28              Schließen
29            </button>
30          </Dialog.Close>
31        </Dialog.Content>
32      </Dialog.Portal>
33    </Dialog.Root>
34  );
35}

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 ? 'Lädt...' : 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        // Füge deine benutzerdefinierten Farben hinzu
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// Strukturiere deine Komponenten nach Domänen
2src/
3  components/
4    ui/          // ShadCN UI Komponenten
5    layout/      // Layout
6    forms/       // Formular-Komponenten
7    features/    // Feature-spezifische Komponenten

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