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:

  1. include the Petal Components folder in the content array
  2. 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

mix.exs 
            defp deps do
  [
    {:petal_components, "~> 0.17"},
  ]
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}

Optional enhancements

Add these styles to you app.css if you’d like:

  1. Improved form error styling
  2. When a modal opens, it animates in

Here is how the improved form error styling appears:

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;
}

/* 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; }
}

How to install VSCode snippets