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

mix.exs 
        defp deps do
  [
    {:petal_components, "~> 0.16"},
  ]
end

Import the components

This allows them to be called anywhere in your views.

<your_app>_web.ex 
        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:

templates/layout/live.html.heex 
        <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:

templates/layout/live.html.heex 
        <.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.exs 
        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.

form_error

app.css 
        .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;
}

How to install VSCode snippets