UI-Bibliotheken nutzen

Warum Buttons, Modals und Tabellen von Grund auf neu bauen, wenn es hervorragende UI-Bibliotheken gibt? Sie bieten fertige, barrierefreie und gestylte Komponenten, die du direkt in dein Projekt einbauen kannst.

Warum UI-Bibliotheken?

Vorteil	Beschreibung
Zeitersparnis	Fertige Komponenten statt alles selbst bauen
Barrierefreiheit	Eingebaute Accessibility (a11y)
Konsistentes Design	Einheitliche Optik ueber die gesamte App
Responsive	Mobil-optimiert out of the box
Getestet	Von der Community geprueft und verbessert

Material UI (MUI)

Material UI ist die beliebteste React-UI-Bibliothek, basierend auf Googles Material Design.

Installation

npm install @mui/material @emotion/react @emotion/styled

Grundlegende Verwendung

import { Button, TextField, Card, CardContent, Typography } from '@mui/material';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <Card sx={{ maxWidth: 400, margin: '2rem auto', padding: 2 }}>
      <CardContent>
        <Typography variant="h5" gutterBottom>
          Anmelden
        </Typography>
        <TextField
          fullWidth
          label="E-Mail"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          margin="normal"
        />
        <TextField
          fullWidth
          label="Passwort"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          margin="normal"
        />
        <Button
          fullWidth
          variant="contained"
          size="large"
          sx={{ mt: 2 }}
        >
          Einloggen
        </Button>
      </CardContent>
    </Card>
  );
}

MUI-Komponenten im Ueberblick

import {
  AppBar, Toolbar, IconButton,
  Drawer, List, ListItem,
  Grid, Container, Box,
  Chip, Avatar, Badge,
  Dialog, Snackbar, Alert,
  Table, TableHead, TableBody, TableRow, TableCell
} from '@mui/material';

function Dashboard() {
  return (
    <Container maxWidth="lg">
      <Grid container spacing={3}>
        <Grid item xs={12} md={6}>
          <Card>
            <CardContent>
              <Typography variant="h6">Benutzer</Typography>
              <Chip label="42 aktiv" color="success" />
            </CardContent>
          </Card>
        </Grid>
        <Grid item xs={12} md={6}>
          <Card>
            <CardContent>
              <Typography variant="h6">Bestellungen</Typography>
              <Chip label="128 heute" color="primary" />
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    </Container>
  );
}

shadcn/ui

shadcn/ui ist ein moderner Ansatz: Statt eine Bibliothek zu installieren, kopierst du Komponenten in dein Projekt. Du hast volle Kontrolle ueber den Code.

Setup

npx shadcn@latest init

Komponenten hinzufuegen

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input

Verwendung

import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';

function ProfileCard() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>Profil bearbeiten</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input placeholder="Name" />
        <Input placeholder="E-Mail" type="email" />
        <div className="flex gap-2">
          <Button variant="outline">Abbrechen</Button>
          <Button>Speichern</Button>
        </div>
      </CardContent>
    </Card>
  );
}

Warum shadcn/ui?

Vorteil	Beschreibung
Volle Kontrolle	Code liegt in deinem Projekt
Keine Abhaengigkeit	Keine npm-Pakete zu aktualisieren
Anpassbar	Aendere den Code wie du willst
Tailwind-basiert	Nutzt Tailwind CSS fuer Styling
Kopieren statt installieren	Nur die Komponenten, die du brauchst

Chakra UI

Chakra UI bietet ein hervorragendes Developer-Erlebnis mit einem prop-basierten Styling-System:

npm install @chakra-ui/react @emotion/react @emotion/styled

import { ChakraProvider, Box, Heading, Text, Button, Stack, Input } from '@chakra-ui/react';

function App() {
  return (
    <ChakraProvider>
      <Box maxW="md" mx="auto" mt={8} p={6} borderWidth={1} borderRadius="lg">
        <Heading size="lg" mb={4}>Kontakt</Heading>
        <Stack spacing={4}>
          <Input placeholder="Dein Name" />
          <Input placeholder="Deine E-Mail" type="email" />
          <Button colorScheme="blue" size="lg">
            Nachricht senden
          </Button>
        </Stack>
      </Box>
    </ChakraProvider>
  );
}

Vergleich der Bibliotheken

Kriterium	MUI	shadcn/ui	Chakra UI
Komponenten	50+	40+	40+
Styling	sx-Prop / Theme	Tailwind	Props
Bundle-Groesse	Gross	Minimal	Mittel
Anpassbarkeit	Theme-System	Voller Code-Zugriff	Theme-System
Lernkurve	Mittel	Niedrig	Niedrig
Community	Sehr gross	Wachsend	Gross
TypeScript	Ja	Ja	Ja

Die richtige Bibliothek waehlen

Waehle MUI wenn:

• Du ein umfassendes Komponentenset brauchst
• Material Design zu deinem Projekt passt
• Du ein Enterprise-Projekt baust

Waehle shadcn/ui wenn:

• Du volle Kontrolle ueber den Code willst
• Du bereits Tailwind CSS verwendest
• Du ein individuelles Design brauchst

Waehle Chakra UI wenn:

• Du schnell prototypen willst
• Du ein einfaches API bevorzugst
• Du Wert auf Barrierefreiheit legst

Praktisches Beispiel: Dashboard mit MUI

import {
  Container, Grid, Card, CardContent,
  Typography, LinearProgress, Box
} from '@mui/material';

function StatCard({ title, value, progress, color }) {
  return (
    <Card>
      <CardContent>
        <Typography color="text.secondary" gutterBottom>
          {title}
        </Typography>
        <Typography variant="h4" component="div">
          {value}
        </Typography>
        <Box sx={{ mt: 2 }}>
          <LinearProgress
            variant="determinate"
            value={progress}
            color={color}
          />
        </Box>
      </CardContent>
    </Card>
  );
}

function Dashboard() {
  return (
    <Container maxWidth="lg" sx={{ mt: 4 }}>
      <Typography variant="h4" gutterBottom>Dashboard</Typography>
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6} md={3}>
          <StatCard title="Besucher" value="1.234" progress={75} color="primary" />
        </Grid>
        <Grid item xs={12} sm={6} md={3}>
          <StatCard title="Umsatz" value="5.678 Euro" progress={60} color="success" />
        </Grid>
        <Grid item xs={12} sm={6} md={3}>
          <StatCard title="Bestellungen" value="89" progress={45} color="warning" />
        </Grid>
        <Grid item xs={12} sm={6} md={3}>
          <StatCard title="Retouren" value="12" progress={15} color="error" />
        </Grid>
      </Grid>
    </Container>
  );
}

Uebungen

1. Installiere MUI und baue eine Login-Seite mit TextField, Button und Card
2. Erstelle ein Dashboard mit StatCards in einem responsiven Grid
3. Probiere shadcn/ui und baue dieselbe Login-Seite – vergleiche den Ansatz mit MUI

Was kommt als Naechstes?

Du kennst jetzt die wichtigsten UI-Bibliotheken. Im naechsten Kapitel geht es um React Router – damit gibst du deiner App Navigation mit verschiedenen Seiten.

Zusammenfassung

• UI-Bibliotheken sparen enorm viel Zeit und bieten barrierefreie Komponenten
• Material UI ist der Klassiker mit dem groessten Komponentenset
• shadcn/ui gibt dir volle Kontrolle durch kopierbaren Code
• Chakra UI bietet ein elegantes, prop-basiertes Styling-System
• Waehle die Bibliothek basierend auf Projektanforderungen und Team-Praeferenzen

---