View Source

Petal Components

About 🌺

Petal stands for:

Petal is a set of HEEX components that makes it easy for Phoenix developers to start building beautiful web apps.

Install

For Petal to work you simply need Tailwind CSS and Alpine JS installed along with with some Tailwind configuration.

Existing projects

1 - Follow this guide to install Tailwind and Alpine.

2 - Add Petal to your deps:

mix.exs

defp deps do
  [
    {:petal_components, "~> 0.1.0"},
  ]
end

3 - Modify your tailwind.config.js file to include these settings:

const colors = require("tailwindcss/colors");

module.exports = {
  mode: "jit",
  purge: [
    "../lib/*_web/**/*.*ex",
    "./js/**/*.js",

    // We need to include the Petal dependency so the classes get picked up by JIT.
    "../deps/petal_components/**/*.*ex"
  ],
  darkMode: false,
  theme: {
    extend: {

      // Set these to your brand colors
      colors: {
        primary: colors.blue,
        secondary: colors.pink,
      },
    },
  },
  variants: {
    extend: {
      cursor: ["disabled"],
    },
  },
  plugins: [require("@tailwindcss/forms")],
};

New projects

We recommend using Petal boilerplate, which is a fresh Phoenix install with Tailwind + Alpine installed. It comes with a project renaming script so you can still rename your project to whatever you like.

Roadmap

Layout

  • [x] container

Form components

  • [x] text input
  • [x] select dropdown
  • [x] textarea
  • [x] checkbox
  • [ ] multiple select
  • [x] radios
  • [ ] file upload
  • [ ] switch

Buttons

  • [x] basic button
  • [x] change size
  • [x] change color
  • [x] loading state (with spinner)
  • [x] filled vs outline
  • [ ] button group

Misc

  • [ ] menu dropdown
  • [ ] tooltips
  • [ ] avatar
  • [x] alerts
  • [ ] tables
  • [ ] cards
  • [ ] breadcrumbs
  • [ ] modal
  • [ ] slide over
  • [ ] spinners
  • [ ] accordian
  • [ ] pagination
  • [x] badges