Petal is a beautiful set of UI components and a powerful Phoenix boilerplate project that helps developers build great looking web applications faster.
Petal Components
An open source component library written in HEEX and styled in Tailwind CSS. Get started now with a fresh Phoenix project with the components installed.
- 50+ clean and polished components
- Open source
- Only requires Tailwind to work
- Get up and running with a clean Phoenix install that has the components pre-installed
Petal Pro
A powerful boilerplate Phoenix app to save you time on your next SAAS project.
- Includes Tailwind, Alpine JS, Petal Components and other essential libraries
- Authentication (phx.gen.auth) styled using Petal Components
- Email template previewer - see your transactional emails in HTML
- Admin functionality - view a list of users and see their activity with logs
- Handy util functions
- Constantly updated with the latest libraries
- Beautiful landing page components with fade in animations
- Wallaby test suite for e2e testing
- Page builder for quickly scaffolding new pages
- i18n - gettext support for internationalization in non-admin areas
- A custom generator, Petal version of phx.gen.live
- Instant fly.io deployments right off the bat
- Create background and cron jobs easily with Oban

Using the Petal Pro boilerplate and Petal components allows you to build your app at the speed of light.
Modular HEEX components beautifully styled with Tailwind CSS. No more worrying about your lack of design skills.
Create and edit your transactional emails with our custom built HTML email template previewer. Includes some HTML email components to make emails that little less painful.
Petal Pro boilerplate comes with phx.gen.auth installed and customised to use Petal components so it looks pro right out of the box.
A collection of handy functions to help you with little things like truncating, money formatting and handling plurals.
See a list of your users. Track their activity with logs. Post your user activity to Slack. And more...
Page builder is a powerful tool that saves you precious time by allowing you to quickly scaffold pages. Build new pages in seconds, not minutes!
Petal Pro is frequently updated with new features. Every purchase will gain access to 1 year of updates and support.
A Petal version of phx.gen.live. Same as phx.gen.live but the templates output uses Petal Pro's layouts and the form components from Petal Components.
Support for internationalization with gettext in non-admin areas.
Add a working dockerfile and ensure all the config is correct for fly.io deployments right off the bat.
Create background and cron jobs easily with Oban. We have provided an example worker to get you started.
Create HTML templates and preview them.
Use our email HEEX components to build emails without worrying about email client compatibility.

<.button label="Primary" />
<.button size="sm" color="secondary" loading label="Loading" />
<.button color="success" size="lg" label="Big button" />
<.form_field type="text_input" form={f} field={:name} />
<.form_field type="checkbox" form={f} field={:terms_accepted} />




<.avatar size="sm" src="pic1.png" />
<.avatar size="md" src="pic2.png" />
<.avatar size="lg" src="pic3.png" />
<.avatar size="xl" src="pic4.png" />
<.avatar name="Matt Platts" random_color />
<.avatar name="Nic Hoban" random_color />
<.badge label="Primary" color="primary" />
<.badge label="Secondary" color="secondary" />
<.badge label="Danger" color="danger" />
<.badge label="Success" color="success" />
<.badge label="Dark" variant="dark" color="info" />
<.badge label="Outline" variant="outline" color="secondary" />
<.badge color="warning" variant="light" icon size="md">
<Heroicons.Solid.clock class="w-4 h-4 pb-[0.05rem]" />
2 hours ago
</.badge>
Open source component library.
-
Open source and free forever
-
50+ clean and polished components
-
New components added each month
-
Only requires Tailwind to work
-
Get up and running with a clean Phoenix install that has the components pre-installed
A Phoenix boilerplate project
-
A clean Phoenix install with added functionality
-
Tailwind and Petal Components
-
phx.gen.auth installed and adapted to use Petal Components
-
Design your transactional emails with the email template previewer
-
Handy util functions
-
Admin can see a list of all users and update / suspend them
-
Wallaby test suite for e2e testing
-
Page builder for quickly scaffolding new pages
-
i18n - gettext support for internationalization in non-admin areas
-
A custom generator, Petal version of phx.gen.live
-
Instant fly.io deployments right off the bat
-
Create background and cron jobs easily with Oban
-
Full refund if you are not satisfied*
*If you are not satisfied with the product you can request a refund within 7 days of purchase.
© 2022 Everfree Pty Ltd. All rights reserved. Privacy Policy License