72Los geht’s

HextaUI und shadcn/ui

HextaUI ist kein Ersatz für shadcn/ui. Es ist eine Registry, die du zu einem shadcn/ui-Projekt hinzufügst, mit derselben CLI, denselben Komponentennamen und denselben Theme-Tokens. Diese Seite erklärt, was sie ergänzt und wann du sie nicht brauchst.

Die kurze Antwort

Nimm shadcn/ui, wenn du einen sauberen Startpunkt willst und Lade-, Fehler- und Leerzustände selbst schreiben möchtest. Nimm HextaUI dazu, wenn du diese Zustände, die Animationen und die Accessibility-Details schon fertig haben willst oder eine Komponente brauchst, die shadcn/ui nicht mitbringt. Du kannst beides in einem Projekt mischen, Komponente für Komponente.

Was gleich bleibt

  • Du installierst mit der shadcn CLI, und der Quellcode wird in dein Projekt kopiert. Nichts ist in einem Paket eingeschlossen.
  • Die Komponenten behalten die Namen, Teile und Props von shadcn/ui, sodass Dialog, DialogTrigger und DialogContent so funktionieren, wie du es erwartest.
  • Das Styling nutzt dieselben Theme-Tokens, etwa --background, --primary und --radius, mit Tailwind CSS v4.
  • Die Dateien landen in @/components/ui, neben den shadcn/ui-Komponenten, die du bereits hast.

So sieht das Hinzufügen einer Komponente aus:

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

Was HextaUI ergänzt

  • Fertige Zustände. Buttons zeigen Pending-, Erfolgs- und Fehler-Feedback anhand des Promises, das du zurückgibst. Switches speichern und machen Änderungen rückgängig. Inputs wackeln, wenn sie ungültig sind. Spinner warten, bevor sie erscheinen, damit schnelle Vorgänge nicht flackern.
  • Unterbrechbare Animationen. Alle Animationen nutzen dieselben Easing-Kurven und Dauern, lassen sich mittendrin umkehren und werden zu einem Fade, wenn reduzierte Bewegung aktiv ist.
  • Touch, Rechts-nach-links und hoher Kontrast. Tippziele werden auf Touchscreens größer, Texteingaben bleiben bei 16px, damit iOS nicht zoomt, Layouts werden für Rechts-nach-links-Sprachen gespiegelt, und Fokusringe bleiben im Windows-Modus für hohen Kontrast sichtbar.
  • Komponenten, die zum Zeitpunkt des Schreibens (Oktober 2026) nicht in der Liste von shadcn/ui stehen, etwa Tree, Video player, Questionnaire, Number flow, Shimmer und Scroll fade.
  • 9 Hooks und 5 Utilities, die du einzeln installieren kannst, etwa useButtonFeedback und useDelayedLoading.
  • 22 Blöcke für KI-Produkte, zum Beispiel Chat-Thread, Tool-Aufrufe und Sprachmodus. Sie gehören zu HextaUI Pro, das kostenpflichtig ist, und Prompt Input ist kostenlos.
  • Dokumentation, die auch für Agenten geschrieben ist. Jede Seite hat eine Markdown-Version, und es gibt einen MCP-Server, den dein Assistent abfragen kann.

Wann shadcn/ui allein die bessere Wahl ist

  • Du willst Radix-Primitives. HextaUI-Komponenten basieren ausschließlich auf Base UI.
  • Du willst die kleinstmögliche Komponente und fügst Zustände und Animationen lieber selbst hinzu. HextaUI-Komponenten enthalten mehr Code, weil sie mehr Fälle abdecken.
  • Du hängst von den Blöcken, Charts und Themes von shadcn/ui oder von den Community-Ports für Vue und Svelte ab. HextaUI gibt es nur für React.
  • Du brauchst die größte Community und die meisten Beispiele von Drittanbietern. shadcn/ui hat von beidem weit mehr.

Beides zusammen nutzen

Weil Namen und Tokens übereinstimmen, kannst du Komponente für Komponente ersetzen. Führe den add-Befehl mit --overwrite aus, um eine shadcn/ui-Komponente durch die HextaUI-Version zu ersetzen, und prüfe den Diff in Git, bevor du ihn übernimmst. Komponenten, die du nicht ersetzt, funktionieren weiter. HextaUI hat 65 Komponenten, und Installation beschreibt die Theme-Tokens, die sie erwarten.