Tools· Design & Kreativ

    Tailark

    Open-Source-Registry mit über 200 shadcn/ui-Blocks für Marketing-Websites in drei Design-Kits, installierbar per CLI oder per Prompt über einen eigenen MCP-Server.

    gestaltendausführbarFreemium

    Beschreibung

    Stärken

    Umfangreicher Block-Katalog
    Über 200 Blocks in mehr als 30 Kategorien, von 16 Hero-Varianten bis zu Preistabellen, Vergleichstabellen, FAQs, Footer, Bento-Layouts und Team-Seiten.
    Drei Design-Kits
    Mist, Dusk und Veil bieten denselben Block-Katalog in unterschiedlicher visueller Sprache, wählbar je nach gewünschtem Look.
    CLI-Installation über die shadcn-Registry
    Blocks lassen sich unter dem Namespace „@tailark" direkt per shadcn-CLI-Befehl in ein React-Projekt einbinden.
    MIT-lizenzierter Kernkatalog
    Der im Repository enthaltene Blockbestand steht unter der MIT-Lizenz, offen für kommerzielle und private Projekte.
    Sichtbarkeit im shadcn-Ökosystem
    Mit über 2.000 Sternen auf GitHub zählt Tailark zu den bekannteren freien Block-Registries für shadcn/ui.

    Einschätzung

    KI-Funktionen

    • MCP-Server für KI-Assistenten Ein konfigurierbarer MCP-Server macht den Block-Katalog für KI-Werkzeuge durchsuchbar und lässt sich per Prompt ansteuern.
    • Prompt-basierte Block-Suche Über den MCP-Server lassen sich einzelne Blocks per natürlichsprachigem Prompt finden, etwa eine passende Hero-Sektion aus der Registry.
    • Prompt-basierter Seitenaufbau Auch komplexere Anfragen, etwa der Aufbau einer kompletten Preisseite aus mehreren Blocks, lassen sich über den MCP-Server an ein KI-Werkzeug delegieren.

    Wofür geeignet

    • React-Projekte im shadcn/ui-Ökosystem, die schnell zu fertigen Marketing-Seiten kommen wollen, ohne jeden Abschnitt selbst zu gestalten
    • Teams, die mehrere Marketing-Landingpages mit konsistentem, hochwertigem Look ausstatten wollen und dafür eines der drei Design-Kits als Stilrichtlinie festlegen
    • KI-gestützte Frontend-Workflows, die Blocks per MCP-Server direkt aus einem Prompt heraus einbinden wollen
    • Weniger geeignet für Weniger geeignet für Projekte außerhalb des React-Ökosystems, dort lassen sich die Blocks nur als Strukturvorlage lesen und müssen manuell in die jeweilige Zielsprache portiert werden

    Einschränkungen und Hinweise

    • React-Voraussetzung Jeder Block ist eine React-Komponente mit Tailwind-Klassen, andere Frameworks benötigen eine manuelle Portierung der Struktur.
    • Kostenpflichtige Erweiterungen Neben dem offenen Repository bietet tailark.com zusätzliche, kostenpflichtige Blockpakete an, die nicht Teil der MIT-lizenzierten Basis sind.
    • Ein Kit pro Projekt Mist, Dusk und Veil sind eigenständige Stillinien desselben Katalogs, eine Mischung mehrerer Kits im selben Projekt führt zu optischen Brüchen.
    • Exakte Blocknamen nötig Die Dokumentation rät, den CLI-Installationsbefehl direkt von der jeweiligen Block- oder Kategorieseite zu kopieren, statt Blocknamen zu erraten.

    Quick Start

    1. Den Tailark-Registry-Namespace in der components.json des eigenen shadcn-Projekts hinterlegen.
    2. Auf tailark.com ein Design-Kit, Mist, Dusk oder Veil, und die passenden Blocks auswählen.
    3. Den CLI-Installationsbefehl von der jeweiligen Block- oder Kategorieseite kopieren, zum Beispiel `npx shadcn@latest add @tailark/<block>`.
    4. Den Befehl im eigenen Projekt ausführen, den Block prüfen und die Design-Tokens auf die eigene Marke anpassen.
    5. Optional den MCP-Server einrichten, um Blocks künftig per Prompt aus einem KI-Werkzeug heraus zu finden und einzubauen.

    Tipps

    • Vor dem ersten Block ein Kit festlegen und dabei bleiben, ein späterer Wechsel bedeutet Nacharbeit an allen bereits eingebauten Abschnitten.
    • Die CLI-Befehle immer von der aktuellen Block-Seite kopieren statt aus dem Gedächtnis, weil sich Blocknamen zwischen Kategorien unterscheiden.
    • Für Projekte außerhalb von React die Blocks nur als Layout-Referenz lesen und die Struktur gezielt nachbauen, statt eine direkte Portierung zu erwarten.
    • Den MCP-Server nutzen, um sich für eine Seite mehrere passende Blocks vorschlagen zu lassen, statt jede Kategorie einzeln zu durchsuchen.

    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