Typografie
Konsistente Überschriften- und Textgrößen mit semantischen Farbtönen.
Heading & Text
Sechs Überschriften-Ebenen und Fließtext mit Größen-, Gewichts-, Farb- und Stil-Varianten (kursiv, unterstrichen, durchgestrichen).
npx hunjy-ui add typographyHeading für Überschriften (level 1-6, entspricht h1-h6) und Text für alles andere – beide nutzen automatisch die Theme-Schriftart und -Farben, statt dass du Tailwind-Klassen von Hand zusammensuchen musst.
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
3xl Fett
2xl Text
Extra großer Text
Großer Text
Standard Text
Kleiner, gedämpfter Text
Primärfarbe
Sekundärfarbe
Akzentfarbe
Fehlertext
Erfolgstext
Warntext
Kursiver Info-Text
Unterstrichener Text
Durchgestrichener Text
Kbd
Darstellung von Tastenkombinationen und Shortcuts.
npx hunjy-ui add kbdZeigt eine Taste optisch wie eine echte Tastatur-Taste an (kleine Box mit Schatten) – für Tastaturkürzel-Hinweise wie „Strg + K“.
Prose, Lead, Caption & Blockquote
Wrapper für langen Fließtext (Blog/Doku/Richtext) mit konsistenter Zeilenlänge und Abständen, plus Einleitungssatz-, Bildunterschriften- und Zitat-Varianten.
npx hunjy-ui add proseFür längere Textinhalte wie Blogartikel oder Doku-Seiten: Prose sorgt für angenehme Zeilenlänge und Absatzabstände, Lead hebt den Einleitungssatz hervor, Caption ist für Bildunterschriften und Blockquote für Zitate mit Quellenangabe.
Ein Einleitungssatz, größer und ruhiger als normaler Fließtext.
Normaler Absatz mit einem Link und fettem Text.
Der Computer ist nur so gut wie das, was wir hineinlegen.
Callout
Hinweis-Textblock für Doku-/Blog-Inhalte (Info/Warnung/Tipp/Notiz), für Fließtext statt als role="alert".
npx hunjy-ui add calloutEin hervorgehobener Textblock innerhalb von Dokumentations- oder Blog-Inhalten, z.B. „Tipp: ...“ – anders als Alert nicht als aktive Benachrichtigung gedacht, sondern als fester Bestandteil des Fließtexts.
hunjy-ui studio für eine Live-Vorschau.