PETAL (@PetalFramework) header
PETAL (@PetalFramework) profile picture

PETAL

@PetalFramework

Tools to supercharge Phoenix development: - Petal Components: 100+ free HEEX components - Petal Pro: a paid boilerplate project Built by @mplatts @nicolashoban

 Planet Earth
petal.build
Joined July 2021
  • Tweets389
  • Following6
  • Followers1.4K
217Media
Photo by PETAL (@PetalFramework)Photo by PETAL (@PetalFramework)Photo by PETAL (@PetalFramework)Photo by PETAL (@PetalFramework)Photo by PETAL (@PetalFramework)Photo by PETAL (@PetalFramework)Photo by PETAL (@PetalFramework)Photo by PETAL (@PetalFramework)Photo by PETAL (@PetalFramework)Photo by PETAL (@PetalFramework)
Testing out the the #ElevenLabs video generator with some Petal reference material yielded a pretty terrific result! Great for a simple promo video if you're after one. See the comments for the prompt I used 👇 #petalcomponents #petalframework
🤖 Made with AI
1
1
1
100
Ask a coding agent for Phoenix UI and you get hand-rolled Tailwind, different every time. One command gives it the real schema for all 213 petal_components instead: claude mcp add petal --transport http mcp.petal.build/mcp Free, no account.
Screenshot for: One command, and your agent stops inventing UI

ALT Screenshot for: One command, and your agent stops inventing UI

2
8
655
Refreshed Petal site coming soon 😎
Nicolas H (@nicolashoban) profile pictureNicolas H@nicolashobanSep 8
The new Petal design system really paying off with our landing page refresh 🤩 Spent a lot of time over the past few months making the entire app UI pretty flex now as you can dial in different looks via the token system. Typeset, radius, gray etc…
Image from Nicolas H (@nicolashoban)
Image from Nicolas H (@nicolashoban)
1
1
198
The new Petal design system really paying off with our landing page refresh 🤩 Spent a lot of time over the past few months making the entire app UI pretty flex now as you can dial in different looks via the token system. Typeset, radius, gray etc…
Image from Nicolas H (@nicolashoban)
Image from Nicolas H (@nicolashoban)
2
1
1
5
336
petal_components 4.15 just dropped 🚀 The biggest release we've ever done! 21 new components, all free and open source. Sidebar, tree, calendar, date picker, number field, slider, sortable, file upload, alert dialog, timeline, resizable panes and more. 🧵👇 Have a play: playground.petal.build
1
1
5
237
more replies
If you use an AI coding assistant, the MCP server is updated in step - 213 components it can inspect instead of guessing at. claude mcp add petal --transport http mcp.petal.build/mcp Update: mix deps.update petal_components #MyElixirStatus #elixirlang #petalcomponents
1
1
59
Full write-up with screenshots is on the blog: petal.build/blog/Petal-Compo…
Petal Components 4.15 - the component wave

Petal Components 4.15 - the component wave

The biggest petal_components release yet: 21 new free, open source components for Phoenix LiveView - sidebar, tree, calendar, date picker, slider, sortable, filters, alert dialog and more, all live...

petal.build
39
Obsessing over the new Calendar component for #petalcomponents - single date or range - min/max, plus disable any dates (bookings, blackout days) - presets like Today or Last 7 days - pure LiveView, no JS framework to add #elixirlang #myelixitstatus #uicomponents 🧵👇
1
1
2
90
Some really exciting and stunning new components coming to #petalcomponents that you'll want to reach for in any new project. Including a new headline effect: Border plasma. Here's a sneak peak! Synced to our MCP server, so your coding agent knows how to use them. #MyElixirStatus #elixirlang
1
1
4
400
more replies
<.hover_card> Hover a link, get a rich preview card. Opens on focus too, so keyboard users get it as well. Pure CSS, no hook, no JavaScript. Even the hover bridge between trigger and card is a transparent ::before.
1
34
All free and open source! playground.petal.build to play with them github.com/petalframework/pe… to star the repo petal.build/ join to stay updated Synced to our MCP server too, so your coding agent already knows them.
26
petal_components 4.13.0 is out - there's now a full data table for LiveView. Sorting, filtering, search, pagination, row selection with bulk actions, column reorder. Free and open source. Try it: playground.petal.build/c/dat… #MyElixirStatus #elixirlang #petalcomponents
1
1
2
251
more replies
The combobox got a hardening pass too - proper accessible names, form validation that actually shows an error instead of silently blocking submit, and chips that remove in the order you see them.
1
28
If you use Claude Code or Cursor, add our MCP and your agent writes <.data_table> instead of hand-rolled table markup: claude mcp add petal --transport http mcp.petal.build/mcp Full changelog: petal.build/changelog Suggestions for future components welcome. Cheers
41
Load more