// the find
petalframework/petal_components
Phoenix + Live View HEEX Components
Petal Components is a Tailwind v4 component library for Phoenix LiveView, covering the 30+ UI patterns you'd reach for in any real app — forms, modals, tables, dropdowns, and more. It's the Phoenix answer to shadcn, distributed as a Hex package rather than file-copying, with a hosted MCP server so AI coding tools can query the actual component schema instead of hallucinating attrs. Aimed squarely at Phoenix developers who want a coherent starting point without building every button and modal from scratch.
The MCP server is a genuinely smart move — instead of dumping component docs into a rules file and hoping the AI reads them, the agent can call `list_components` and `get_component` at generation time and get the live schema. That's a different class of AI-tool integration than most component libraries offer. The library has solid test coverage (a test file per component) and a self-contained dev server you can spin up with one command to see everything rendered, which makes contributing or debugging straightforward. Distribution as a Hex package means `mix deps.update petal_components` and you're done, no manual file surgery on each upgrade like shadcn requires. The Tailwind v4 adoption is forward-looking — most Phoenix component libraries are still on v3.
The MCP server is a hosted external service, which means your AI tooling now has a runtime dependency on `mcp.petal.build` being up; the schema introspection story breaks silently if that goes down or the hosted version lags the package version. Being a Hex package rather than copied source means you can't easily fork a single component to change its structure — you're stuck with whatever slots and attrs the library exposes, which can be limiting when a design veers from the defaults. The chart component is listed but chart libraries in LiveView are still a rough area generally, and there's no mention of what's powering it or what happens with real-time data. Dark mode support exists but relies on Tailwind v4 CSS cascade, so if your app already has opinions about how dark mode is applied you may hit conflicts.