Petal Components rassemble des composants d’interface destinés à l’écosystème Petal Framework

Un ensemble de composants de style shadcn pour Phoenix LiveView : petal_components

Petal Components rassemble des composants d’interface destinés à l’écosystème Petal Framework.

Petal Components est un paquet Hex Elixir qui fournit un ensemble de composants HEEx pour les applications Phoenix LiveView : boutons, formulaires, modales, tableaux, cartes, etc. Les composants sont construits avec Tailwind v4 et fonctionnent dans les vues live et dead. Le README décrit la conception comme la même idée que shadcn pour React : des primitives composables que vous possédez, sans système de thème monolithique. La bibliothèque inclut également un serveur MCP hébergé sur mcp.petal.build qui expose le schéma de chaque composant aux outils de codage IA, afin que des outils comme Claude Code, Cursor, Codex et Windsurf puissent appeler les composants avec les bons attributs plutôt que de générer du balisage Tailwind brut à partir de données d'entraînement. Le README ne précise pas combien de composants sont inclus, au-delà de la mention de 30+ dans la section catalogue.

La bonne lecture de ce dépôt commence par sa promesse précise, puis par les contraintes que le README expose. Les noms de commandes, les chemins et les formats ne sont pas des détails décoratifs : ils déterminent ce qui peut être reproduit et ce qui reste une affirmation du projet. Pour une équipe, le point important est de relier chaque capacité à son environnement réel, à ses dépendances et à la surface de maintenance. Cette distinction évite de transformer une liste de fonctions en garantie générale. Les résultats annoncés appartiennent au contexte décrit par les auteurs ; ils demandent donc une comparaison avec les entrées, les versions et les plateformes réellement utilisées. Le dépôt reste utile quand cette limite est acceptée, car il donne un point de départ concret et des traces consultables. Repère 1 pour petal_components.

Installation via le serveur MCP ou manuellement : petal_components

Le chemin d'installation recommandé est un processus en deux étapes. D'abord, ajoutez le serveur MCP une fois avec la commande `claude mcp add petal --transport http https://mcp.petal.build/mcp`. Ensuite, dans tout projet Phoenix, dites à votre IA d'installer petal_components. L'agent appelle get_install_instructions sur le MCP, applique les modifications à mix.exs, exécute mix deps.get, patche assets/css/app.css et ajoute use PetalComponents à votre module web. Le README indique que cela fonctionne dans les applications umbrella et les projets Phoenix standard. La méthode manuelle nécessite d'ajouter {:petal_components, "~> 4.0"} à mix.exs, éventuellement {:mdex, "~> 0.12"} pour les composants de chat markdown, puis d'importer Tailwind et le CSS par défaut dans app.css, d'ajouter use PetalComponents à votre module web, et d'enregistrer les hooks JS fournis dans app.js pour les entrées mot de passe, copiables, effaçables et les composants de chat. Le README note que le reste de la bibliothèque est uniquement CSS et LiveView.JS. Ensuite, exécutez mix deps.get et mix compile.

La bonne lecture de ce dépôt commence par sa promesse précise, puis par les contraintes que le README expose. Les noms de commandes, les chemins et les formats ne sont pas des détails décoratifs : ils déterminent ce qui peut être reproduit et ce qui reste une affirmation du projet. Pour une équipe, le point important est de relier chaque capacité à son environnement réel, à ses dépendances et à la surface de maintenance. Cette distinction évite de transformer une liste de fonctions en garantie générale. Les résultats annoncés appartiennent au contexte décrit par les auteurs ; ils demandent donc une comparaison avec les entrées, les versions et les plateformes réellement utilisées. Le dépôt reste utile quand cette limite est acceptée, car il donne un point de départ concret et des traces consultables. Repère 2 pour petal_components.

Comment le serveur MCP fonctionne pour les outils IA : petal_components

Le serveur MCP compagnon sur mcp.petal.build est la source canonique des schémas de composants. Le README indique aux outils IA d'appeler list_components puis get_component lorsqu'ils ont besoin de détails. Un fichier rules.md sert d'ensemble d'instructions canonique, couvrant la cartographie des noms de composants, des motifs courants comme formulaire-dans-carte et modale-avec-formulaire, et la règle de toujours utiliser une balise petal_components existante avant d'écrire du HEEx à la main. Le README ne précise pas si le serveur MCP nécessite une authentification ou s'il y a des limites de débit. Il ne documente pas non plus le format de schéma lui-même ; la documentation en direct et rules.md sont les références les plus proches. Pour Cursor, Windsurf, Continue, Codex et Cline, le README renvoie à des commandes d'installation par outil sur https://petal.build/petal-components.

La bonne lecture de ce dépôt commence par sa promesse précise, puis par les contraintes que le README expose. Les noms de commandes, les chemins et les formats ne sont pas des détails décoratifs : ils déterminent ce qui peut être reproduit et ce qui reste une affirmation du projet. Pour une équipe, le point important est de relier chaque capacité à son environnement réel, à ses dépendances et à la surface de maintenance. Cette distinction évite de transformer une liste de fonctions en garantie générale. Les résultats annoncés appartiennent au contexte décrit par les auteurs ; ils demandent donc une comparaison avec les entrées, les versions et les plateformes réellement utilisées. Le dépôt reste utile quand cette limite est acceptée, car il donne un point de départ concret et des traces consultables. Repère 3 pour petal_components.

Catalogue de composants et exemples : petal_components

Le README liste 30+ composants par catégories : layout et contenu (container, card, titres, accordion, tabs, stepper, skeleton), formulaires (field, text_input, select, checkbox, radio_group, switch, textarea, date_input, file_input), actions (button, button_group, dropdown, menu, user_dropdown_menu), feedback (alert, modal, slide_over, popover, tooltip, progress, spinner, rating) et affichage de données (table, pagination, breadcrumbs, badge, avatar, marquee, icon, link). Le serveur MCP est décrit comme l'inventaire en direct ; appelez list_components pour l'ensemble actuel. Le README inclut quelques exemples de code : un formulaire dans une carte, une modale avec formulaire, un tableau avec actions de ligne et un bouton de chargement. L'exemple de tableau utilise le slot :col pour rendre un bouton avec une taille et une variante. Une grille visuelle est sur petal.build/components et un playground en direct sur petal-components-demo.fly.dev.

La bonne lecture de ce dépôt commence par sa promesse précise, puis par les contraintes que le README expose. Les noms de commandes, les chemins et les formats ne sont pas des détails décoratifs : ils déterminent ce qui peut être reproduit et ce qui reste une affirmation du projet. Pour une équipe, le point important est de relier chaque capacité à son environnement réel, à ses dépendances et à la surface de maintenance. Cette distinction évite de transformer une liste de fonctions en garantie générale. Les résultats annoncés appartiennent au contexte décrit par les auteurs ; ils demandent donc une comparaison avec les entrées, les versions et les plateformes réellement utilisées. Le dépôt reste utile quand cette limite est acceptée, car il donne un point de départ concret et des traces consultables. Repère 4 pour petal_components.

Relation avec shadcn et l'écosystème plus large : petal_components

Le README compare directement le projet à shadcn, la bibliothèque de composants React. La philosophie partagée est celle des primitives composables et de l'absence de système de thème monolithique ; la différence réside dans le runtime (HEEx au lieu de JSX) et la distribution (un paquet Hex au lieu d'un CLI qui copie des fichiers). petal_pro est un boilerplate SaaS payant construit sur petal_components, et le README le qualifie de meilleure référence pour la composition réelle. Les projets compagnons incluent petal-components-mcp (la source du serveur MCP), petal_boilerplate (une installation Phoenix fraîche avec les composants câblés), un kit Figma officiel et une extension VSCode avec plus de 65 snippets. Les remerciements listent phoenix_playground, Phoenix et LiveView, Tailwind CSS, Apache ECharts (pour le composant chart) et Heroicons (pour le composant icon).

La bonne lecture de ce dépôt commence par sa promesse précise, puis par les contraintes que le README expose. Les noms de commandes, les chemins et les formats ne sont pas des détails décoratifs : ils déterminent ce qui peut être reproduit et ce qui reste une affirmation du projet. Pour une équipe, le point important est de relier chaque capacité à son environnement réel, à ses dépendances et à la surface de maintenance. Cette distinction évite de transformer une liste de fonctions en garantie générale. Les résultats annoncés appartiennent au contexte décrit par les auteurs ; ils demandent donc une comparaison avec les entrées, les versions et les plateformes réellement utilisées. Le dépôt reste utile quand cette limite est acceptée, car il donne un point de départ concret et des traces consultables. Repère 5 pour petal_components.

Développement local, tests et licence : petal_components

Le dépôt prend en charge un serveur de développement autonome sans umbrella. Après le clonage, exécutez mix deps.get, mix tailwind.install, puis iex -S mix run dev.exs, ce qui démarre un playground sur localhost:4000 avec chaque composant rendu et un rechargement en direct lors des modifications de lib/. Les tests se lancent avec mix test. Pour les contributions, le README pointe vers une feuille de route publique pour suggérer des composants et accepte les pull requests. Il existe également une application umbrella Phoenix séparée appelée petal_development qui inclut petal_components comme sous-module pour des tests intégrés. La licence est MIT, le copyright détenu par Matthew Platts. Le texte de licence accorde la permission d'utiliser, copier, modifier, fusionner, publier, distribuer, sous-licencier et vendre des copies du logiciel, et indique que le logiciel est fourni "tel quel" sans garantie d'aucune sorte, mais ne dit rien sur la posture de sécurité ou le support.

La bonne lecture de ce dépôt commence par sa promesse précise, puis par les contraintes que le README expose. Les noms de commandes, les chemins et les formats ne sont pas des détails décoratifs : ils déterminent ce qui peut être reproduit et ce qui reste une affirmation du projet. Pour une équipe, le point important est de relier chaque capacité à son environnement réel, à ses dépendances et à la surface de maintenance. Cette distinction évite de transformer une liste de fonctions en garantie générale. Les résultats annoncés appartiennent au contexte décrit par les auteurs ; ils demandent donc une comparaison avec les entrées, les versions et les plateformes réellement utilisées. Le dépôt reste utile quand cette limite est acceptée, car il donne un point de départ concret et des traces consultables. Repère 6 pour petal_components.

Conclusion éditoriale

Il vise les applications qui veulent réutiliser des composants cohérents, avec une vérification nécessaire des versions, des dépendances et des conventions de style. La première vérification doit porter sur les éléments propres à petal_components, notamment les commandes, fichiers et limites cités par son README.

Sources officielles

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