Primitives

Button

Interaktiver Button mit Varianten und Größen.

Vorschau
Konfiguration
import { Button } from "@repo/ui/button"

<Button variant="primary" size="md">
  Button
</Button>

Badge

Farbige Statusanzeige für Kategorien, CME-Punkte und Zustände.

Vorschau
CME-Zertifiziert
Konfiguration
import { Badge } from "@repo/ui/badge"

<Badge variant="primary">CME-Zertifiziert</Badge>

Toggle

Ein/Aus-Schalter in drei Größen.

Vorschau
Konfiguration
import { Toggle } from "@repo/ui/toggle"

<Toggle size="md" label="Benachrichtigungen" defaultChecked />

Tooltip

CSS-only Tooltip, erscheint bei Hover.

Vorschau
Hilfe-Information
Konfiguration
import { Tooltip } from "@repo/ui/tooltip"

<Tooltip text="Hilfe-Information" position="top">
  <Button variant="outline">Hover mich</Button>
</Tooltip>

Divider

Trennlinie horizontal, vertikal oder mit Label.

Vorschau
Konfiguration
import { Divider } from "@repo/ui/divider"

<Divider />

StyledLink

Gestylte Links in verschiedenen Varianten.

Vorschau
Alle Kurse anzeigen
Konfiguration
import { StyledLink } from "@repo/ui/StyledLink"

<StyledLink variant="default" href="/kurse">
  Alle Kurse anzeigen
</StyledLink>

Card

Container mit optionalem Hover-Effekt und Border.

Hoverable Card (default)

Hover zeigt translateY + shadow.

Static Card (hoverable=false)

Kein Hover-Effekt.

Tabs

Compound Component mit Keyboard-Navigation und ARIA.

Hier erscheinen gebuchte Kurse.

Toast

Benachrichtigungen mit auto-dismiss.