Die schwierigen Zustände, erledigt. Praktische Blocks für 
shadcn/ui
Produktionsreife Blocks für Produkte, die mit KI gebaut werden, vom Chat, der streamt, wiederholt und nachfragt, bevor ein Tool läuft, bis zu den Screens drumherum. Gebaut auf 65 kostenlosen Open-Source-Komponenten und bereit, von deinem Agenten mit der shadcn CLI installiert zu werden.
Live-Vorschauen
Über uns
HextaUI ist eine Sammlung von React-Komponenten auf Basis von shadcn/ui und Base UI. Sie deckt die alltäglichen Teile einer Oberfläche ab, von Buttons und Formularen bis zu Menüs, Tabellen und Chat, und liefert sie als Quellcode, der dir gehört.
Jede Komponente ist für die Teile gebaut, die gewöhnlich übersprungen werden: die Lade-, Fehler- und Leerzustände, Bewegung, die auf halbem Weg unterbrochen werden kann, die Tastaturwege, was ein Screenreader ansagt, und ein Layout, das bei 320 Pixeln oder in einer rechts-nach-links-Sprache noch hält.
Motion läuft auf einem Satz Easing-Kurven und Dauern, respektiert die Einstellung für reduzierte Bewegung und kann auf halbem Weg unterbrochen und umgekehrt werden. Fokusringe folgen der Form dessen, was sie umranden, und jeder interaktive Teil funktioniert allein mit der Tastatur.
Das Aussehen bleibt mit Absicht ruhig: neutrale Flächen, feine Rahmen, Schatten nur auf Dingen, die über der Seite schweben, und Ecken, die konzentrisch bleiben, wenn eine Form in einer anderen sitzt. Deine Marke kommt über deine Theme-Tokens zur Geltung, nicht über unsere.
Komponenten werden eine nach der anderen neu gebaut und erscheinen erst, wenn jeder Zustand funktioniert. Jede erhält eine Docs-Seite, die diese Zustände live zeigt, sodass du die Randfälle ausprobieren kannst, bevor du etwas installierst.
Die Docs sind für Menschen und Agenten gleichermaßen geschrieben. Jede Seite wird auch als Markdown veröffentlicht, und llms.txt bildet die ganze Bibliothek ab, sodass ein KI-Assistent dieselben API-Referenzen und Beispiele liest wie du.
Der Code gehört dir. Die shadcn CLI kopiert den Quellcode in dein Projekt, sodass du ihn lesen, ändern und behalten kannst, ohne auf ein Package-Update zu warten. Alles ist Open Source auf GitHub.
Was drin ist
So funktioniert’s
- shadcn/ui einrichtenFühre shadcn init in einem React-19-Projekt mit Tailwind CSS v4 aus. Nutzt das Projekt bereits shadcn/ui, überspringe das.
- Eine Komponente hinzufügenÜbergib seine Registry-URL an die shadcn CLI. Der Quellcode, seine Abhängigkeiten, die Theme-Tokens und alle HextaUI-Komponenten, auf denen er aufbaut, landen in deinem Projekt.
- Mach es zu deinemImportiere es wie jede andere shadcn/ui-Komponente aus @/components/ui und ändere dann Markup, Motion oder Styles. Nichts ist in einem Package eingeschlossen.
- Auf dem Laufenden bleibenKomponenten werden offen auf GitHub verbessert. Ändert sich eine, führe denselben add-Befehl mit
--overwriteaus und prüfe den Diff in Git, bevor du ihn übernimmst. - Bring deinen Agenten mitRichte Claude Code, Cursor oder jeden MCP-Client auf https://hextaui.com/mcp, und er kann Props und Beispiele nachschlagen, während er mit dir Code schreibt.
HextaUI Pro
Pro ist eine wachsende Sammlung kompletter Blocks aus denselben Komponenten: ein Chat-Thread, Streaming-Text, Tool-Aufrufe, Agent-Todos, ein Codeblock mit Diffs, Voice mode und mehr. Es sind die Screens, die ein KI-Produkt am ersten Tag braucht, mit bereits ausgearbeiteten Zuständen und Motion, und die Account-, Einstellungs- und Dashboard-Screens drumherum folgen als Nächstes.
Kostenlose KI-Kits liefern dir einen Chat, der richtig aussieht. Pro geht darum, was danach kommt: eine Antwort mitten im Satz stoppen und wiederholen, einen Tool-Aufruf genehmigen, bevor er läuft, zwischen Nachrichtenversionen wechseln und einen Thread, der nicht springt, während das Modell noch spricht. Jeder Block kommt mit einem funktionierenden AI-SDK-Beispiel.
Jeder Block hat eine Live-Vorschau, die jeder öffnen kann, und wird über dieselbe shadcn CLI aus einer privaten Registry installiert. Pro kostet bis zum 30. November 2026 einmalig 49 $ für einen Entwickler oder 149 $ für ein Team von 10. Danach kostet Solo 79 $ und Team 249 $, für unbegrenzte private und kommerzielle Projekte. Pläne vergleichen oder Prompt Input kostenlos installieren.
Die vier Vorschauen oben auf dieser Seite sind Pro-Blocks, die live laufen. Thinking zeigt das Reasoning und die Tool-Schritte eines Modells, während sie hereinstreamen. Prompt input übernimmt Modell- und Effort-Auswahl, Diktat, Erwähnungen, Befehle und Datei-Uploads. Chat thread rendert eine vollständige Unterhaltung, und Voice mode macht daraus eine gesprochene, über die Stimme des Browsers oder eine Realtime-Voice-API.
Solo deckt einen Entwickler ab. Team deckt bis zu 10 ab, per E-Mail aus deinem Account verwaltet, mit einem geteilten Token in CI. Kunden und Kollegen, die nur das fertige Produkt nutzen, brauchen keinen Platz. Passt es nicht zu dir, bekommst du innerhalb von 30 Tagen eine volle Rückerstattung, ohne Rückfragen.