215 free components, a live playground, an MCP server and a design skill, so Claude Code, Cursor or Codex write Phoenix UI that looks like one product.
Free account, no credit card. Prefer email?
1.4M Hex downloads · 3,383 developers on Petal
How it works
Petal gives your agent a vocabulary: 215 components on one CSS contract, an MCP server that answers with the installed version's real schemas, and a skill that carries the design rules.
defp deps do
[
{:phoenix, "~> 1.8"},
{:phoenix_live_view, "~> 1.1"},
{:ecto_sql, "~> 3.12"},
{:postgrex, ">= 0.0.0"},
{:petal_components, "~> 4.16"}
]
end
@import "tailwindcss";
@source "../deps/petal_components/**/*.*ex";
@import "../deps/petal_components/assets/default.css";
@import "./colors.css";
def html do
quote do
use Phoenix.Component
use PetalComponents
import MyAppWeb.CoreComponents
end
end
One dependency, two lines of CSS, one use. Tailwind v4 picks up the rest.
Install guideclaude mcp add petal --transport http https://mcp.petal.build/mcp
claude plugin marketplace add petalframework/petal_components
claude plugin install petal-design
// .cursor/mcp.json
{ "mcpServers": { "petal": { "url": "https://mcp.petal.build/mcp" } } }
# ~/.codex/config.toml
[mcp_servers.petal]
url = "https://mcp.petal.build/mcp"
get_install_instructions
the install steps, in order
list_components
every component, one line each
get_component <name>
attrs, slots, defaults, an example
The MCP answers with real attrs, slots and enums for the installed version. The skill loads the design rules only when the agent does UI work.
About the MCP and the skillAdd an invoices table with status filters.
<.table rows={@invoices}>
<:col :let={i} label="Invoice">{i.number}</:col>
<:col :let={i} label="Status">
<.badge dot dot_color={i.tone} label={i.status} />
</:col>
<:col :let={i} label="Amount">{i.amount}</:col>
</.table>
It reads the contracts it needs, then writes HEEx that uses them. No invented Tailwind, no second design system.
Browse the components:root {
--pc-radius: 00.375rem0.625rem0.875rem;
--brand-600: oklch(0.37 0.01 286)oklch(0.54 0.25 293)oklch(0.55 0.22 263)oklch(0.60 0.15 163)oklch(0.77 0.17 71);
--pc-font-heading: "Inter", sans-serif;
}Pick a primary and a radius. Get code hands you the CSS, and every component follows it.
Open the playgroundThe system
petal_components is the source. The playground renders it, the MCP server describes it, the skill carries its rules and Petal Pro builds the SaaS on it. Whichever agent you use reads the same 215 components. Pro is the only paid piece.
petal_components
Buttons to data tables on one CSS contract. The source the other four read from.
Browse the components
215
components
Every piece reads petal_components, so Claude Code, Cursor and Codex learn Petal once and write the same HEEx.
What you get
Faster to build and cheaper to run. One vocabulary for design and code, a test file behind every component, and apps already running on the same package you install. Thousands of hours saved the old way, and now the tokens too: a screen written against a real schema is written once, not prompted three times.
Claude Code
Cursor
<.stepper steps={@steps} size="sm" label_placement="bottom" />
The dials your designer sets in the playground are the tokens your agent's HEEx reads. Dark mode, radius, font and primary are one CSS contract, so nothing is styled twice and nothing drifts between the two.
See the theming contractEvery component module ships with its own test file: LazyHTML assertions on the rendered DOM, and a Wallaby accessibility pass when you want it. Your agent inherits a suite it did not have to write.
Read the tests
Thousands of developers hold a Petal account, hundreds of projects have registered as running on it, and the apps in the showcase are open for you to click through. MIT licensed, so the code you ship is yours.
Browse the showcasePromptAdd a Paid status badge to the invoice row.
Without Petal the agent writes a long block of utility classes for the badge. With Petal it writes one badge tag from the component schema, shown rendered below.
Ask for a status badge without Petal and the agent invents a block of Tailwind it will never write the same way twice. With Petal it reads one schema and writes one line, so the output is shorter and the second screen matches the first.
Connect the MCPFrom builders
Real words from developers who shipped on Petal, kept as they wrote them.
I'm going through the @PetalFramework documentation for my 1st project. It is fantastic! The docs cover every available feature. It walks you through the steps to use it for a reminder app. Looks awesome and I still need to dig into the components.
Jack Gray
Author of the Phoenix Deployment Handbook
Petal Pro has been brilliant. I have a couple products in post-wireframe pre-marketing to the general masses and Petal Pro lets me focus on spiking the core functionality without being distracted by fiddly details. And there are a ton of things built in when I decide if/when to take them from spike phase to final product.
Randy Schmidt
Web developer and project manager
This has been great. It has allowed us to get off the ground and get funded and has been incredibly valuable, thank you! Will definitely use it on our next project or startup.
Paul Mathews
Shipped a funded startup on Petal Pro
BIG thank you, following a first quick demo today. We were preparing a project kickstart in my company and had less than a month to do it. Thanks to this amazing framework, and a bit of JavaScript charts, we had a standing ovation from the company board.
Olivier
Kickstarted a company project in under a month
Thanks to Petal Pro, I was able to effortlessly build a simple back-office system for my company all on my own. I truly appreciate your work and wanted to express my gratitude.
Just wanted to say that I'm having loads of fun creating something with Pro, thanks for all the work.
Maciej Gryka
Automating things at RainforestQA
Pricing
The 215 components are MIT, and the playground, the MCP server and the design skill need no account. Petal Pro is the SaaS underneath, bought once, with a year of updates included.
Free forever
One sign-in, nothing to install, nothing to pay.
Continue with GitHubFree account, no credit card. Prefer email?
Free without an account: the 215 components, the playground, the MCP server and the design skill.
A free account adds
Every Pro tier includes
$299 one-time
A year of updates included. Another year is $149 when you want it.
Single adds
One project on Petal Pro
Upgrade to Unlimited later.
One payment. No subscription.
$749 one-time
A year of updates included. Another year is $374 when you want it.
Unlimited adds
Unlimited projects on Petal Pro
Upgrade to Business later.
One payment. No subscription.
Business $1,999 one-time, then $999 to renew
Everything in Unlimited, plus sign-in by email domain, up to 5 team members and priority support. Buy Business
Enterprise $9,999 by enquiry
Everything in Business, plus up to 10 team members and 25 hours of dedicated technical support a year. Email us about Enterprise
588 Petal Pro licences since 2022 606 projects registered Full refund within 7 days
Questions
More on the terms and the licence lives on the pricing page.
Because it can build it four different ways, and it will. The expensive part of software was never the typing. It is deciding how a thing should work and holding that decision steady across months of features. Petal Pro is the decisions: multi-tenancy, billing, auth, orgs, admin and background jobs, made once and written down where your agent looks before it writes. You keep using your agent. It builds on rails instead of from scratch.
The full source behind every docs example, a vote on the components roadmap, a builder profile and release news by email. The components, the playground, the MCP server and the design skill all work without one.
No. The components are MIT licensed and install as a Hex dependency in any Phoenix app, new or existing. Petal Pro is a separate product: the application underneath, with auth, orgs, billing, admin and deployment already built and documented for your agent.
A year of updates and access to the private repository. When the year ends you keep every version released during it, and you keep the projects you built. Renewing for another year costs less than the first purchase.
Yes, on commercial work and client work. The one limit is that you cannot use Petal Pro to build something that competes with Petal, and you cannot republish the source. The full terms are in the licence.
Email us within 7 days and we refund in full, no questions asked.
One sign-in, nothing to install. What a free account gets you today:
Free account, no credit card. Prefer email?
3,383 developers on Petal 1.4M Hex downloads 606 projects registered