Primitives

Komponenten · @repo/ui

Primitives

Atomare Bausteine — Button, Badge, Card, Toggle, Divider, Tooltip, StyledLink. Werden in jeder App verwendet.

ButtonStable

@repo/ui/button

Interaktiver Button mit fünf Farb-Varianten und drei Größen. Variante outlineLight ist für dunkle Untergründe (Hero-Bilder, Brand-blaue Sections) — der Showcase rahmt diese Variante automatisch in eine dunkle Surface, sonst wäre der Button auf hellem Hintergrund unsichtbar.

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

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

BadgeStable

@repo/ui/badge

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

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

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

ToggleStable

@repo/ui/toggle

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

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

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

TooltipStable

@repo/ui/tooltip

CSS-only Tooltip, erscheint bei Hover.

Vorschau
Konfiguration
React
import { Tooltip } from "@repo/ui/tooltip"

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

DividerStable

@repo/ui/divider

Trennlinie horizontal, vertikal oder mit Label.

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

<Divider />

StyledLinkStable

@repo/ui/StyledLink

Gestylte Links in fünf Varianten.

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

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

CardStable

@repo/ui/card

Container mit optionalem Hover-Effekt und Border. Padding muss intern via CSS-Klasse zugewiesen werden — Card liefert nur Border und Schatten.

Hoverable Card (default)

Hover zeigt translateY + Shadow.

Static Card

Kein Hover-Effekt — hoverable={false}.

TabsStable

@repo/ui/tabs

Compound Component mit Keyboard-Navigation und ARIA. Wechselt zwischen benannten Inhaltsbereichen.

Hier erscheinen gebuchte Kurse.

ToastStable

@repo/ui/ToastProvider

Benachrichtigungen mit auto-dismiss. Provider muss in der App-Wurzel hängen, dann via useToast().