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
How to install Petal Components
Add dependency
defp deps do
[
{:petal_components, "~> 0.16"},
]
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}
Optionally enhance your form error styling
If you want your form inputs to go red when there is an error, add these styles to your app.css
file.
.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;
}