Petal Components: UI-Bausteine für Phoenix und LiveView

Eine shadcn-artige Komponentensammlung für Phoenix LiveView

Petal Components ist ein Elixir-Hex-Paket, das eine Reihe von HEEx-Komponenten für Phoenix-LiveView-Anwendungen bereitstellt: Schaltflächen, Formulare, Modale, Tabellen, Karten und mehr. Die Komponenten sind mit Tailwind v4 gebaut und funktionieren in Live- und Dead-Views. Die README beschreibt das Design als dieselbe Idee wie shadcn für React: zusammensetzbare Primitive, die du selbst besitzt, ohne monolithisches Themensystem. Die Bibliothek enthält auch einen gehosteten MCP-Server unter mcp.petal.build, der das Schema jeder Komponente für KI-Codierungswerkzeuge bereitstellt, sodass Tools wie Claude Code, Cursor, Codex und Windsurf die Komponenten mit korrekten Attributen aufrufen können, anstatt rohes Tailwind-Markup aus Trainingsdaten zu generieren. Die README gibt nicht an, wie viele Komponenten das Paket enthält, abgesehen von der Erwähnung von 30+ im Katalogabschnitt.

Installation über den MCP-Server oder manuell

Der empfohlene Installationspfad ist ein zweistufiger Prozess. Fügen Sie zuerst den MCP-Server einmal mit dem Befehl `claude mcp add petal --transport http https://mcp.petal.build/mcp` hinzu. Sagen Sie dann in jedem Phoenix-Projekt Ihrer KI, sie soll petal_components installieren. Der Agent ruft get_install_instructions auf dem MCP auf, wendet Änderungen an mix.exs an, führt mix deps.get aus, patcht assets/css/app.css und fügt use PetalComponents zu Ihrem Web-Modul hinzu. Die README sagt, dass dies in Umbrella-Apps und Standard-Phoenix-Projekten funktioniert. Der manuelle Weg erfordert das Hinzufügen von {:petal_components, "~> 4.0"} zu mix.exs, optional {:mdex, "~> 0.12"} für Chat-Markdown-Komponenten, dann das Importieren von Tailwind und dem Standard-CSS in app.css, das Hinzufügen von use PetalComponents zu Ihrem Web-Modul und das Registrieren der gebündelten JS-Hooks in app.js für Passwort-, kopierbare, löschbare Eingaben und Chat-Komponenten. Die README stellt fest, dass der Rest der Bibliothek nur CSS und LiveView.JS ist. Führen Sie danach mix deps.get und mix compile aus.

Wie der MCP-Server für KI-Tools funktioniert

Der begleitende MCP-Server unter mcp.petal.build ist die kanonische Quelle für Komponentenschemata. Die README weist KI-Tools an, list_components aufzurufen und dann get_component, wenn sie Details benötigen. Es gibt eine rules.md-Datei, die als kanonischer Anweisungssatz dient, einschließlich der Komponentenbenennungszuordnung, häufiger Muster wie Formular-in-Karte und Modal-mit-Formular, sowie der Regel, immer ein vorhandenes petal_components-Tag zu verwenden, bevor man HEEx von Hand schreibt. Die README spezifiziert nicht, ob der MCP-Server eine Authentifizierung erfordert oder Rate-Limits hat. Sie dokumentiert auch nicht das Schemaformat selbst; die Live-Dokumentation und rules.md sind die nächsten Referenzen. Für Cursor, Windsurf, Continue, Codex und Cline verweist die README auf Installationsbefehle pro Tool unter https://petal.build/petal-components.

Komponentenkatalog und Beispiele

Die README listet 30+ Komponenten in Kategorien auf: Layout und Inhalt (container, card, Überschriften, accordion, tabs, stepper, skeleton), Formulare (field, text_input, select, checkbox, radio_group, switch, textarea, date_input, file_input), Aktionen (button, button_group, dropdown, menu, user_dropdown_menu), Feedback (alert, modal, slide_over, popover, tooltip, progress, spinner, rating) und Datenanzeige (table, pagination, breadcrumbs, badge, avatar, marquee, icon, link). Der MCP-Server wird als Live-Inventar beschrieben; rufen Sie list_components für den aktuellen Satz auf. Die README enthält einige Codebeispiele: ein Formular in einer Karte, ein Modal mit einem Formular, eine Tabelle mit Zeilenaktionen und eine Ladeschaltfläche. Das Tabellenbeispiel verwendet den :col-Slot, um eine Schaltfläche mit Größe und Variante zu rendern. Ein visuelles Raster finden Sie unter petal.build/components und einen Live-Playground unter petal-components-demo.fly.dev.

Beziehung zu shadcn und das breitere Ökosystem

Die README vergleicht das Projekt direkt mit shadcn, der React-Komponentenbibliothek. Die gemeinsame Philosophie sind zusammensetzbare Primitive und das Fehlen eines monolithischen Themensystems; der Unterschied liegt in der Laufzeit (HEEx statt JSX) und der Verteilung (ein Hex-Paket statt einer CLI, die Dateien kopiert). petal_pro ist eine kostenpflichtige SaaS-Boilerplate, die auf petal_components aufbaut, und die README nennt sie die beste Referenz für reale Komposition. Begleitprojekte umfassen petal-components-mcp (die MCP-Serverquelle), petal_boilerplate (eine frische Phoenix-Installation mit verdrahteten Komponenten), ein offizielles Figma-Kit und eine VSCode-Snippets-Erweiterung mit 65+ Snippets. In den Danksagungen werden phoenix_playground, Phoenix und LiveView, Tailwind CSS, Apache ECharts (für die Chart-Komponente) und Heroicons (für die Icon-Komponente) aufgeführt.

Lokale Entwicklung, Tests und Lizenz

Das Repository unterstützt einen eigenständigen Entwicklungsserver ohne Umbrella. Nach dem Klonen führen Sie mix deps.get, mix tailwind.install und dann iex -S mix run dev.exs aus, wodurch ein Playground unter localhost:4000 gestartet wird, der jede Komponente rendert und bei Änderungen an lib/ live neu lädt. Tests werden mit mix test ausgeführt. Für Beiträge verweist die README auf eine öffentliche Roadmap zur Vorschlag von Komponenten und akzeptiert Pull-Requests. Es gibt auch eine separate Phoenix-Umbrella-App namens petal_development, die petal_components als Submodul für integrierte Tests enthält. Die Lizenz ist MIT, das Urheberrecht liegt bei Matthew Platts. Der Lizenztext erlaubt die Nutzung, das Kopieren, Modifizieren, Zusammenführen, Veröffentlichen, Verteilen, Unterlizenzieren und Verkaufen von Kopien der Software und besagt, dass die Software ohne jegliche Gewährleistung bereitgestellt wird, sagt aber nichts über Sicherheitslage oder Support aus.

Redaktionelles Fazit

Die Bibliothek ist unter MIT-Lizenz veröffentlicht, und die README verweist auf eine öffentliche Roadmap, eine Demo-Playground und Begleitprojekte wie eine Boilerplate und ein Figma-Kit. Der zuverlässigste Weg, die aktuelle Komponentenliste zu sehen, ist der Aufruf von list_components auf dem MCP-Server, da die README nur eine Auswahl hervorhebt.

Offizielle Quellen

1. Official documentation
2. Official README
3. Project repository
4. Release notes