"Petal Components" package - a set of Tailwind styled components written in HEEX

mplatts

With HEEX released we decided to start a components library using Tailwind CSS - check it out here: Petal Components.

We also have a boilerplate project if you want to get up and running quickly - it’s just a fresh install of Phoenix with Tailwind/Alpine and petal_components included.

Petal Components allows you to get up and running with a suite of styled components eg:

<Container.container>
  <Typography.h1>Petal Components</Typography.h1>
  <Button.a href="/" label="a" />
  <Button.button label="Button" />
  <Button.patch href="/" label="Live Patch" />
  <Button.redirect href="/" label="Live Redirect" />

  <!-- Includes every single heroicon -->
  <Heroicons.Solid.home class="w-5 h-5" />

  <!-- Includes all the basic form elements. eg: -->
  <Form.text_input form={:user} field={:name} placeholder="eg. John" />
  <Form.textarea form={:user} field={:description} />

  <!--Plus much more -->
</Container.container>

We plan to add more components over time and eventually add a “pro” (paid) version that adds things like styled authentication pages / Stripe integration / email templates etc… Does this sound like something you guys would be interested in?

We welcome your thoughts or any ideas for components. Cheers

67 comments

/phoenix #library #liveview #tailwindcss #alpinejs #petal_components

49 13881 67

2026-05-14 07:08:45 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

scoop

I for one would be terribly interested in this sort of thing, as prophesied by Chris McChord.

Would be interesting to hear your thoughts on the terms of the license of Tailwind UI (haven’t reviewed these yet, but I have secured the full license in any event).

Is there any way to achieve your goals without Alpine?

Kind regards

Post #1

mplatts

We’re pretty much building our components from scratch (taking influence from a number of sources). As far as we’re aware none of our components contravene any licensing terms.

And yes we’re going to try remove the Alpine dependency. eg. with the dropdown component I tried to use the new Phoenix.LiveView.JS lib but the click.away event was giving me headaches. Seems like Chris has fixed that now so I’ll try again.

Post #2

chrismccord

Creator of Phoenix

This is super great! I have a bunch of similar components in my own apps. My one big suggestion would be to consolidate the modules. You could likely have a single module with the current surface area. One of the goals of function components was to push folks away from the one-function-per-module for component pattern. By grouping the functions, they are more discoverable, doc’d in one place, etc. For example, folks could import PetalComponent (or single alias) and have most core UI components available as <.link, <.button. I’m not saying everything must be define under the same namespace, but the current surface area would be really well suited and would be nice in user land. Awesome work!

Post #3

joerichsen

This looks pretty awesome

And your website https://petal.build/ looks pretty slick as well

Post #4

mplatts

Thanks Chris! That makes sense - I’ll try and group the functions. I had them written in Surface previously so was wondering how to do it.

Post #5

mplatts

Thanks Joe - haha good find - yeah eventually I’ll put a demo there and also have a pro version. It’s still a WIP, but people can sign up now and I’ll send out an email to users once it’s complete.

Post #6

adrianbarbic

Very interested in using something like this. Coming from a React background it makes the dev feel more familiar. Wondering if you plan to remove Node/NPM totally (not sure how is that is with tailwind), having that removed and Alpine removed would make for a great setup, less is better if the same functionality can be achieved.

Side note: I did not realise that you setup github as a template repo till I saw you github link, something I have an immediate use for, so glad I took a look.

Post #7

mplatts

Unfortunately Tailwind needs Node for the tailwindcss CLI to work. You could try just loading the entire Tailwind CSS lib in your <head> but it’d be massive. Using their CLI means your css file only has css definitions for the classes you actually use.

Yep I haven’t really used Github templates but for anyone else you can click the “Use template” button on the boilerplate project to get up and running quickly. There’s also a script in there to rename your project to whatever.

Post #8