Tools· Design & Kreativ

    Fulldev UI

    Quelloffene Bibliothek astro-nativer UI-Komponenten und fertiger Marketing-Sections im Shadcn-Registry-Format, mit Props-basierter Anpassung statt React-Runtime oder reinem HTML-Copy-Paste.

    gestaltendausführbarOpen Source

    Beschreibung

    Stärken

    Astro-native ohne React-Zwang
    Komponenten und Blocks sind echte `.astro`-Dateien mit Props und Slots, keine React-Komponenten und kein reines HTML-Markup zum Abtippen.
    Shadcn-kompatibler Installationsweg
    Einzelne Bausteine lassen sich über die vertraute Shadcn-CLI und den `@fulldev`-Registry-Namespace gezielt ins Projekt holen.
    Breiter Bestand an fertigen Abschnitten
    Rund 84 Blocks für Heroes, Features, Pricing, FAQs, Call-to-Actions, Artikel, Reviews, Header und Footer decken die gängigen Marketing- und Content-Seiten ab.
    Token-basiertes Theming
    Farbe, Radius, Abstand und visueller Ton lassen sich zentral über CSS-Variablen anpassen, statt jede Komponente einzeln umzustylen.
    Quelloffen unter MIT-Lizenz
    Der Quellcode installiert als Astro- und Tailwind-Dateien direkt im Projekt, einsehbar, versionierbar und ohne Attributionspflicht anpassbar.

    Einschätzung

    KI-Funktionen

    • Markdown-Dokumentation für Agenten Jede Doku-Seite hat eine Markdown-Version, über ein angehängtes `.md` an der URL abrufbar, als direkter Einstiegspunkt für KI-Agenten ohne Umweg über gerendertes HTML.
    • Blocks als Kompositionsvorlage KI-Agenten können bestehende Blocks direkt verwenden oder als Referenz für Layout, Props, Abstände und Komponenten-Zusammensetzung beim Bauen eigener Abschnitte nutzen.
    • Sicher adaptierbarer Quellcode Komplette Sections mit dokumentierten Props, bei denen Quelle und gerenderte Vorschau nebeneinander stehen, sollen laut Anbieter für Entwickler und Agenten gleichermaßen sicher anpassbar sein.

    Wofür geeignet

    • Astro-Projekte, die fertige Marketing-Sections als echte parametrisierte Komponenten statt reinem HTML-Markup brauchen
    • Teams, die KI-Agenten anhand von echtem, einsehbarem Astro-Quellcode Layouts und Komponenten zusammensetzen lassen wollen
    • Content-getriebene Websites wie Docs, redaktionelle Seiten oder Marketing-Auftritte, die neben kompletten Sections auch Typography-, Preis-, Bewertungs- und Video-Komponenten brauchen
    • Weniger geeignet für Weniger geeignet für Projekte auf React-Basis, dort passt eine Bibliothek wie shadcn/ui direkter ins bestehende Komponenten-Modell, und für Vorhaben, die von Beginn an ein hochindividuelles Designniveau ohne Nacharbeit an den Tokens erwarten

    Einschränkungen und Hinweise

    • Kein React Die Bibliothek ist bewusst Astro-nativ gebaut, für Projekte mit React-Anforderung ist sie nicht die richtige Wahl, lässt sich laut Anbieter aber neben shadcn/ui einsetzen, wenn ein Projekt zusätzlich interaktive React-Komponenten braucht.
    • Design-Niveau erfordert Nacharbeit Out of the box liegt die visuelle Qualität im soliden, inhaltsgetriebenen Segment, für ein auffälliges, eigenständiges Erscheinungsbild ist ein Remap der Farb- und Abstands-Tokens auf die eigene Marke nötig.
    • Lizenzdatei in britischer Schreibweise Die Lizenzdatei im Repository heißt `LICENCE` statt `LICENSE`, wer automatisiert danach sucht, sollte die abweichende Schreibweise berücksichtigen.
    • Registry-Installation setzt Projekt-Setup voraus Der Weg über die Shadcn-CLI braucht eine bestehende `components.json` im Projekt, ohne diese Konfiguration bleibt nur die manuelle Übernahme der Astro-Dateien aus dem Quellcode.

    Quick Start

    1. Dokumentation unter ui.full.dev öffnen und passende Components oder Blocks auswählen.
    2. Im eigenen Astro-Projekt eine `components.json` für die Shadcn-CLI einrichten, falls noch nicht vorhanden.
    3. Einzelne Bausteine über `npx shadcn@latest add @fulldev/<block-name>` installieren.
    4. Installierte Astro- und Tailwind-Dateien öffnen und Props sowie Slots an den eigenen Content anpassen.
    5. Farb-, Radius- und Abstands-Tokens über CSS-Variablen auf die eigene Marke umstellen.

    Tipps

    • Für KI-gestützte Layoutarbeit direkt die Markdown-Version der Dokumentation verlinken, das spart Agenten den Umweg über gerendertes HTML.
    • Beim Theming zuerst die CSS-Variablen auf die eigenen Projekt-Tokens mappen, statt einzelne Tailwind-Klassen in den Komponenten von Hand umzufärben.
    • Bei fehlender Registry-Konfiguration die betroffenen `.astro`-Dateien direkt aus dem Repository übernehmen und Imports sowie Props von Hand nachziehen.
    • Fertige Blocks eher als Startpunkt für die eigene Section-Struktur begreifen als als fertiges Enddesign, für ein unverwechselbares Ergebnis lohnt sich eine Anpassung von Typografie und Bildsprache zusätzlich zu den Tokens.

    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