Tools· Design & Kreativ

    Untitled UI

    React-Komponentenbibliothek aus dem Untitled-UI-Figma-Design-System, deren Bausteine als bearbeitbarer Quellcode statt Paketabhängigkeit installiert werden, mit React Aria als Accessibility-Fundament.

    gestaltendausführbarFreemium

    Beschreibung

    Stärken

    Ownership-Modell statt Paketabhängigkeit
    Der Add-Befehl der Kommandozeile kopiert den vollständigen, bearbeitbaren Quellcode einer Komponente direkt ins eigene Projekt, ohne Laufzeitabhängigkeit von einem externen Paket.
    React Aria als Accessibility-Fundament
    Tastatur-, Fokus- und ARIA-Verhalten sind über React Aria von Grund auf eingebaut statt nachträglich ergänzt.
    Breites kostenloses Fundament
    Der MIT-lizenzierte Free-Umfang deckt bereits Basis-Komponenten sowie viele Application-UI- und Marketing-Bausteine kommerziell nutzbar ab.
    Next.js-Integration mit Dark Mode
    Eine eigene CLI-Route richtet Routing- und Theme-Provider für Next.js in einem Schritt ein, inklusive Unterstützung für hellen und dunklen Modus über CSS-Variablen.
    Herkunft aus einem etablierten Figma-Kit
    Design und Code stammen aus demselben System, laut Anbieterangabe zählt Untitled UI über 380.000 Designerinnen und Designer.

    Einschätzung

    KI-Funktionen

    • KI-taugliche Starter-Kits für Lovable und bolt.new Neben klassischen Framework-Integrationen bietet Untitled UI laut Anbieterangabe eigene Starter-Kits für die KI-gestützten Page-Builder Lovable und bolt.new.

    Wofür geeignet

    • Enterprise- und SaaS-Teams, die zugängliche Application-UI wie Dashboards, Tabellen, Formulare und Auth-Flows mit korrektem Tastatur- und Fokus-Verhalten brauchen
    • Teams, die bereits mit dem Untitled-UI-Figma-Kit arbeiten und Design und Code im selben System halten wollen
    • Projekte, die den Komponenten-Quellcode direkt im eigenen Repository besitzen und frei anpassen wollen, statt eine geschlossene Bibliothek einzubinden
    • Weniger geeignet für Weniger geeignet für Marketing-Sektionen mit ausgeprägten Bewegungseffekten, dafür fehlt Untitled UI bewusst eine eingebaute Animationsbibliothek

    Einschränkungen und Hinweise

    • Kein Motion out of the box Untitled UI bringt bewusst keine Animationsbibliothek mit, für bewegungslastige Hero-Sections muss eine externe Lösung ergänzt werden.
    • PRO-Lizenz für vollen Umfang nötig Über 5.000 Komponenten und mehr als 250 Seiten-Vorlagen sind lizenzpflichtig, der Free-Umfang deckt nur einen Teil des Katalogs ab.
    • Kein automatischer Versionsabgleich im Projekt Weil der Code im Projekt liegt und nicht über einen Paketmanager verwaltet wird, wandern Verbesserungen an den Komponenten nicht von selbst in bestehende Projekte, PRO-Inhalte sind zusätzlich über einen Login-Befehl freigeschaltet.
    • Überschneidung mit anderen Primitiven-Bibliotheken Wer bereits shadcn/ui im Projekt nutzt, sollte sich für eine Primitiven-Quelle entscheiden, um doppelte Basis-Komponenten zu vermeiden.
    • Client-Kontext für interaktive Komponenten nötig In Next.js mit App Router benötigen Komponenten, die React-Aria-Hooks nutzen, die "use client"-Direktive, sonst funktionieren sie serverseitig nicht wie erwartet.

    Quick Start

    1. Mit der Kommandozeile ein Projekt initialisieren, etwa npx untitledui@latest init --nextjs oder --vite.
    2. Eine Komponente hinzufügen, etwa npx untitledui@latest add button, der Quellcode landet direkt im eigenen Projekt.
    3. Für PRO-Komponenten und Seiten-Vorlagen zunächst über die Kommandozeile einloggen, um die Lizenz zu verknüpfen.
    4. Bei Next.js-Projekten Route- und Theme-Provider gemäß Integrationsanleitung einbinden, für clientseitiges Routing und Dark-Mode-Unterstützung.
    5. Bei bestehenden Projekten alternativ die nötigen Pakete manuell installieren, die Tailwind-Konfiguration erweitern und die Utility-Funktionen ergänzen.

    Tipps

    • Bei interaktiven Komponenten mit React-Aria-Hooks im Next.js-App-Router die "use client"-Direktive nicht vergessen.
    • Vor der Installation prüfen, ob eine Komponente bereits über shadcn/ui oder eine andere Primitiven-Bibliothek im Projekt existiert, um doppelte Basis-Bausteine zu vermeiden.
    • Für bewegungslastige Hero- oder Marketing-Sektionen eine separate Animationsbibliothek ergänzen, Untitled UI liefert bewusst keine.
    • Den PRO-Login-Status vor größeren Bauten prüfen, damit lizenzgated Seiten-Vorlagen nicht erst mitten im Build fehlschlagen.

    Zugang

    Stand: · Angaben zu Preisen, Tarifen und Funktionen sind eine Momentaufnahme. Vor einer Entscheidung lohnt der Blick auf die Anbieterseite.

    Im Workshop wird daraus Ihre Methode.

    Wer diesen Prozess einmal laufen sieht, will als Nächstes den Agenten dahinter. Das bauen wir im Workshop Vom Prozess zum Agenten.

    Workshops ansehen

    Gespräch statt Pitch

    Erst verstehen, dann entscheiden. Wir nehmen uns Zeit für ein erstes Gespräch, ohne Verkaufsdruck, ohne Verpflichtung.

    Gespräch vereinbaren