Einführung

Was ist HextaUI

HextaUI ist eine Sammlung von 65 Komponenten, 9 Hooks und 5 Utilities für React. Du fügst sie mit der shadcn CLI hinzu, der Quellcode landet in deinem Projekt, und ab dann ist es dein Code zum Lesen und Ändern.

Jede Komponente behält die shadcn/ui-API, die du schon kennst. Der Unterschied ist die Arbeit, die du sonst selbst erledigen müsstest: die Zustände, die Randfälle und die kleinen Details, die eine Oberfläche fertig wirken lassen.

Schnellstart

Füge in einem mit shadcn/ui eingerichteten Projekt eine Komponente hinzu:

pnpm dlx shadcn@latest add https://hextaui.com/r/button.json

Importiere sie dann aus @/components/ui.

import { Button } from "@/components/ui/button"

export function SaveButton() {
  return (
    <Button feedback onClick={() => saveSettings()}>
      Save changes
    </Button>
  )
}

Anforderungen, das Hinzufügen von allem auf einmal und der @hextaui-Namespace werden unter Installation behandelt.

Was du bekommst

Das gilt für jede Komponente, du musst also nicht jede einzeln prüfen.

Motion

Animationen verwenden die Easing-Kurven des Themes und lassen sich mittendrin unterbrechen und umkehren. Bei reduzierter Bewegung wird aus Bewegung ein einfaches Ein- und Ausblenden.

Tastatur und Screenreader

Alles funktioniert allein mit der Tastatur, und der Fokus landet dort, wo du ihn erwartest, wenn Popups öffnen und schließen. Auch Änderungen werden angesagt: Toasts, Lade- und Speicherzustände, Auswahlen und Folienwechsel.

Touch und kleine Bildschirme

Tippziele wachsen auf Touchscreens, Texteingaben bleiben bei 16 px, damit iOS nicht zoomt, und Popups bleiben bis zu 320 px Breite auf dem Bildschirm. Layouts werden für Rechts-nach-links-Sprachen gespiegelt.

Hoher Kontrast

Fokusringe, Ränder von Steuerelementen und ausgewählte Zustände bleiben im Windows-Modus für hohen Kontrast sichtbar, und das Standard-Theme erfüllt WCAG-AA-Kontrast in Hell und Dunkel.

Gebaut auf

• shadcn/ui mit dem Stil base-vega
• Base-UI-Primitives für Verhalten und Barrierefreiheit
• Tailwind CSS v4, mit Theme-Tokens für Farbe, Radius und Easing
• Tabler-Icons

KI-Assistenten

Jede Seite hat eine Markdown-Version, und /llms.txt listet sie alle auf. Assistenten mit MCP-Unterstützung können sich mit dem HextaUI MCP-Server verbinden, um die Dokumentation zu durchsuchen, Komponenten-APIs zu lesen und Installationsbefehle zu erhalten.

Lizenz

HextaUI ist Open Source unter der MIT-Lizenz, kostenlos für private und kommerzielle Projekte.