Datenanzeige

Komponenten · @repo/ui

Datenanzeige

Komponenten für strukturierte Daten — Avatar, Chip, DataTable, Pagination.

AvatarStable

@repo/ui/avatar

Benutzer-Avatar mit Größen, Farbvarianten, Status-Indikator und Gruppen-Komposition.

Vorschau
DG
Konfiguration
React
import { Avatar } from "@repo/ui/avatar"

<Avatar
  size="md"
  variant="primary"
  initials="DG"
/>
Weitere Beispiele
Avatar-Gruppe (max=4 zeigt +N Overflow)
DG
MS
JK
AB
+2

ChipStable

@repo/ui/chip

Interaktive Tags, auswählbar und optional entfernbar. Für Filter-UI; nicht für Status (→ Badge).

Vorschau
Konfiguration
React
import { Chip } from "@repo/ui/chip"

<Chip>
  Neurologie
</Chip>
Weitere Beispiele
Mehrfachauswahl

DataTableStable

@repo/ui/DataTable

Gestylte Tabelle mit alternierenden Zeilen und Hover-States. Compound-API mit Head/Body/Row/Cell.

KursTypCMEStatus
Akute SchlaganfalltherapieLive-Webinar4Abgeschlossen
MS Update 2026On-Demand2In Bearbeitung
Epilepsie-ManagementHybrid8Geplant

AccordionItemStable

@repo/ui/AccordionItem

Erweiter-/Einklapp-Karte für FAQ-Listen, Detail-Bereiche und CMS-Akkordeons. Plain-Text oder Rich-HTML-Body (sanitised), optional default-open.

Die Fortbildungsakademie der Deutschen Gesellschaft für Neurologie. Hier finden Sie CME-zertifizierte Webinare, On-Demand-Inhalte und Lernpfade.

PaginationStable

@repo/ui/pagination

Seitennavigation mit Ellipsen und Prev/Next.

Vorschau
Konfiguration
React
import { Pagination } from "@repo/ui/pagination"

<Pagination
  currentPage={1}
  totalPages={12}
  onPageChange={setPage}
/>