Welcome to Petal 👋
A versatile set of beautifully styled components for you to use in your next Phoenix project.
Demo of all components.Installation
New projects
You can use our free Phoenix basic boilerplate that has the components pre-installed.
Or you can use our paid boilerplate (Petal Pro), which provides additional functionality like authentication, email components, layouts and more.
How to install Tailwind
Firstly, follow this guide to install Tailwind: Tailwind installation guide for Phoenix.
After installation you will need to open your tailwind.config.js
and make two changes:
-
include the Petal Components folder in the
content
array -
include a primary and secondary color palette in the
theme.extend.colors
object
Example tailwind.config.js
:
const colors = require("tailwindcss/colors");
module.exports = {
content: [
"../lib/*_web.ex",
"../lib/*_web/**/*.*ex",
"./js/**/*.js",
"../deps/petal_components/**/*.*ex",
],
darkMode: "class",
theme: {
extend: {
colors: {
primary: colors.blue,
secondary: colors.pink,
},
},
},
plugins: [require("@tailwindcss/forms")],
};
How to install Petal Components
Add dependency
defp deps do
[
{:petal_components, "~> 0.17"},
]
end
Import the components
This allows them to be called anywhere in your views.
defmodule YourAppWeb
...
defp view_helpers do
quote do
...
use PetalComponents
end
end
Remove your own modal function
You may have a modal/1
function defined already, which will cause a clash with PetalComponents.Modal.modal/1
. Check in live_helpers.ex
and remove it.
Replace container
class in the live layout
In the file templates/layout/live.html.heex
you might find this default code:
<main class="container">
<p class="alert alert-info" role="alert"
phx-click="lv:clear-flash"
phx-value-key="info"><%= live_flash(@flash, :info) %></p>
<p class="alert alert-danger" role="alert"
phx-click="lv:clear-flash"
phx-value-key="error"><%= live_flash(@flash, :error) %></p>
<%= @inner_content %>
</main>
Note that container
is a Tailwind class, which you may or may not want there. Here is a new layout that uses Petal Components:
<.container class="my-10">
<.alert
color="info"
class="mb-5"
label={live_flash(@flash, :info)}
phx-click="lv:clear-flash"
phx-value-key="info"
/>
<.alert
color="danger"
class="mb-5"
label={live_flash(@flash, :error)}
phx-click="lv:clear-flash"
phx-value-key="error"
/>
<%= @inner_content %>
</.container>
Optionally set a translator for form errors
If you want to translate your form errors to anything other than English you will need to provide Petal Components with your translater function.
config :petal_components, :error_translator_function, {<YourApp>Web.ErrorHelpers, :translate_error}
Optional enhancements
Add these styles to you app.css if you’d like:
- Improved form error styling
- When a modal opens, it animates in
Here is how the improved form error styling appears:
.select-wrapper select {
@apply text-sm border-gray-300 rounded-md shadow-sm disabled:bg-gray-100 disabled:cursor-not-allowed focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 dark:bg-gray-800 dark:text-gray-300 focus:outline-none ;
}
label.has-error:not(.phx-no-feedback) {
@apply !text-red-900 dark:!text-red-200;
}
textarea.has-error:not(.phx-no-feedback), input.has-error:not(.phx-no-feedback), select.has-error:not(.phx-no-feedback) {
@apply !border-red-500 focus:!border-red-500 !text-red-900 !placeholder-red-700 !bg-red-50 dark:!text-red-100 dark:!placeholder-red-300 dark:!bg-red-900 focus:!ring-red-500;
}
input[type=file_input].has-error:not(.phx-no-feedback) {
@apply !border-red-500 !rounded-md focus:!border-red-500 !text-red-900 !placeholder-red-700 !bg-red-50 file:!border-none dark:!border-none dark:!bg-[#160B0B] dark:text-red-400;
}
input[type=checkbox].has-error:not(.phx-no-feedback) {
@apply !border-red-500 !text-red-900 dark:!text-red-200;
}
input[type=radio].has-error:not(.phx-no-feedback) {
@apply !border-red-500;
}
/* Modal animation */
.animate-fade-in-scale {
animation: 0.2s ease-in 0s normal forwards 1 fade-in-scale-keys;
}
.animate-fade-in {
animation: 0.2s ease-out 0s normal forwards 1 fade-in-keys;
}
@keyframes fade-in-scale-keys{
0% { scale: 0.95; opacity: 0; }
100% { scale: 1.0; opacity: 1; }
}
@keyframes fade-in-keys{
0% { opacity: 0; }
100% { opacity: 1; }
}