Datenanzeige
Karten, Tabellen und Avatare zur strukturierten Darstellung von Inhalten.
Card
Karten-Container mit Header-, Content- und Footer-Bausteinen.
npx hunjy-ui add cardDer Standard-Container, um zusammengehörige Inhalte optisch abzugrenzen – z.B. einen Preisplan, ein Produkt oder ein Profil. Header/Content/Footer geben eine feste, konsistente Struktur vor.
Team-Plan
Für wachsende Teams mit erweiterten Funktionen.
Unbegrenzte Projekte, Prioritäts-Support und erweiterte Analysen.
Table
Vollständiges Tabellen-Set mit Header, Body und Caption.
npx hunjy-ui add tableDie rohen HTML-Tabellen-Bausteine (thead/tbody/tr/td), nur mit Theme-Styling versehen – volle Kontrolle über den Inhalt jeder Zelle. Für Daten aus einem JSON-Array ohne eigenes Markup nimm stattdessen Data Table.
| Name | Rolle | Status |
|---|---|---|
| Anna Meyer | Admin | Aktiv |
| Jonas Berg | Editor | Aktiv |
| Lea Schmidt | Betrachter | Eingeladen |
Avatar
Benutzerbild mit Fallback-Initialen, fünf Größen und Gruppierung.
npx hunjy-ui add avatarZeigt ein Profilbild an – lädt kein Bild oder existiert keins, erscheinen automatisch die Initialen als Platzhalter. AvatarGroup stapelt mehrere überlappend, z.B. für „wer ist in diesem Projekt“.
Data Table
Tabelle, die direkt aus JSON befüllt wird – als festes data-Array oder per src-URL, die automatisch geladen wird. Optional mit Volltextsuche, Spaltensortierung, Pagination und CSV-Export.
npx hunjy-ui add data-tableGib einfach ein Array von Objekten (oder eine API-URL) an, der Rest passiert automatisch: Spalten werden erkannt, und mit ein paar Props bekommst du Suche, sortierbare Spalten, Pagination und CSV-Export dazu – ohne die Tabellen-Logik selbst zu schreiben.
data={users}
| Id | Name | Role | Active | |
|---|---|---|---|---|
| 1 | Anna Meyer | anna@beispiel.de | Admin | Ja |
| 2 | Jonas Berg | jonas@beispiel.de | Editor | Ja |
| 3 | Lea Schmidt | lea@beispiel.de | Betrachter | Nein |
src="https://jsonplaceholder.typicode.com/users"
searchable + exportable + pageSize={5} + sortierbare Spalten
| Aktiv | |||
|---|---|---|---|
| Anna Meyer | anna@beispiel.de | Admin | Ja |
| Jonas Berg | jonas@beispiel.de | Editor | Ja |
| Lea Schmidt | lea@beispiel.de | Betrachter | Nein |
| Tom Fischer | tom@beispiel.de | Editor | Ja |
| Nina Wolf | nina@beispiel.de | Betrachter | Ja |
Empty State
Platzhalter-Ansicht für leere Listen/Tabellen mit Icon, Text und optionaler Aktion.
npx hunjy-ui add empty-stateWas der Nutzer sieht, wenn eine Liste, ein Postfach oder eine Tabelle noch leer ist – statt einer leeren weißen Fläche gibt es eine Erklärung und meist einen Button, um direkt loszulegen.
Keine Nachrichten
Sobald du Nachrichten erhältst, erscheinen sie hier.
Tree View
Baum-Ansicht für hierarchische Daten (Dateibäume, Kategoriebäume, ...) mit Auf-/Zuklappen, Auswahl und Tastatursteuerung.
npx hunjy-ui add tree-viewFür Daten, die ineinander verschachtelt sind (Ordner/Dateien, Kategorien/Unterkategorien) – Nutzer können Zweige auf- und zuklappen und Einträge per Klick oder Tastatur auswählen, wie in einem Datei-Explorer.
Charts
Abhängigkeitsfreie SVG-Diagramme (BarChart, LineChart) für eine einzelne Datenreihe.
npx hunjy-ui add chartsEinfache Balken- und Liniendiagramme für eine Werte-Reihe (z.B. Umsatz pro Monat) – ohne eine schwere Chart-Bibliothek als Abhängigkeit zu installieren, reines SVG.