Overlays
Dialoge, Panels und Kontext-Overlays – alle barrierefrei auf Basis von Radix UI.
Dialog & Modal
Modaler Dialog mit Overlay, Header/Footer und Fokus-Trap.
npx hunjy-ui add dialogEin Fenster, das sich über die Seite legt und den Rest abdunkelt – für Aktionen, die volle Aufmerksamkeit brauchen (z.B. ein Formular ausfüllen), bevor man weitermachen kann.
Alert Dialog
Bestätigungs-Dialog für kritische Aktionen mit Action-/Cancel-Semantik.
npx hunjy-ui add alert-dialogWie Dialog, aber speziell für 'bist du sicher?'-Bestätigungen vor unumkehrbaren Aktionen (z.B. Löschen) – erzwingt eine bewusste Entscheidung, statt versehentlich weggeklickt zu werden.
Drawer
Seitliches Panel (Sheet), baut auf dem Dialog auf.
npx hunjy-ui add drawerWie Dialog, aber schiebt sich von der Seite (oder oben/unten) rein statt mittig zu erscheinen – gut für Einstellungs-Panels oder Filter, die mehr Platz brauchen als ein Popover.
Popover
Frei positionierbares Overlay-Panel.
npx hunjy-ui add popoverEin kleines Panel, das direkt neben einem Button/Element aufklappt – für zusätzliche Infos oder ein Mini-Formular, ohne die ganze Seite abzudunkeln wie bei Dialog.
Hover Card
Vorschau-Karte, die bei Hover über einem Trigger erscheint.
npx hunjy-ui add hover-cardZeigt eine Vorschau beim reinen Hovern (ohne Klick) – z.B. eine Profilkarte, wenn man über einen @Nutzernamen fährt, wie bei Twitter/X.
Tooltip
Kurzinfo bei Hover oder Fokus.
npx hunjy-ui add tooltipEin winziger Text-Hinweis, der beim Hovern/Fokussieren erscheint – ideal, um ein reines Icon-Button (z.B. Zahnrad = 'Einstellungen') verständlich zu machen.
Accordion
Auf-/zuklappbare Inhaltsabschnitte.
npx hunjy-ui add accordionEine Liste von Fragen/Abschnitten, bei der jeweils nur einer aufgeklappt ist – der Klassiker für FAQ-Seiten, spart Platz gegenüber allem auf einmal sichtbar.
Collapsible
Einzelner auf-/zuklappbarer Inhaltsbereich, ohne Akkordeon-Gruppierung.
npx hunjy-ui add collapsibleEin einzelner Auf-/Zu-Bereich, unabhängig von anderen (im Unterschied zu Accordion, wo mehrere zusammengehören) – z.B. 'weitere Details anzeigen' unter einer Teilnehmerliste.
Scroll Area
Container mit gestylter, plattformübergreifend konsistenter Scrollbar.
npx hunjy-ui add scroll-areaEin Container mit eigener, überall gleich aussehender Scrollbar – nützlich, wenn du nicht willst, dass ein langer Inhalt (z.B. eine Chat-Liste) je nach Betriebssystem unterschiedlich aussieht.
Command
Such-/Befehlspalette (Cmd+K-Stil) mit filterbarer, gruppierter Liste.
npx hunjy-ui add commandEine Suchleiste, die per Tastenkürzel (z.B. Cmd+K) aufpoppt und alle Befehle/Seiten durchsuchbar macht – wie in VS Code, Linear oder Notion.
Confirm
Imperative Bestätigungs-API (wie toast()): confirm({ title, onConfirm }) direkt aus jedem Button-Handler aufrufen, ohne eigenen Open-State zu verwalten.
npx hunjy-ui add confirmEine schnelle Ja/Nein-Sicherheitsabfrage, die du direkt aus jedem Klick-Handler heraus aufrufst (confirm({...})) – ohne selbst einen Dialog-Open-Zustand verwalten zu müssen. Praktisch bei vielen Löschen-Buttons über die App verteilt.
Pop Confirm
Kompakte Inline-Bestätigung direkt am Trigger statt eines vollflächigen Modals – ideal für Löschen-Aktionen in Tabellenzeilen. Verwaltet den Open-State selbst.
npx hunjy-ui add pop-confirmWie Confirm, aber als kleines Popover direkt am Button statt eines vollen Modals – schneller für kleine Bestätigungen, z.B. eine einzelne Tabellenzeile löschen.