Petal Components

Documentation

For full documentation, visit petal.build.

Try it out

We have a fresh Phoenix boilerplate template with Petal Components ready to go if you would like to get your hands dirty.

VSCode Snippets Extension

Install our VSCode extension to gain access to 65+ snippets for all of the components.

Official Figma UI kit

We’ve released an official Figma UI kit for Petal. This kit includes all the open source and pro components you need to design your app in Figma.

Roadmap

Layout

[x] container

Form components

[x] text input
[x] select dropdown
[x] textarea
[x] checkbox
[x] radios
[x] errors
[x] labels
[x] file upload
[x] text variants (email, password, tel)
[x] color input
[x] range input
[x] time, datetime, & date input
[x] multiple select (see checkbox group)
[x] switch
[x] input help text
[ ] input prefix and postfix

Buttons

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

Misc

[x] menu dropdown
[x] avatar
[x] alerts
[x] tables
[x] cards
[x] breadcrumbs
[x] modal
[x] slide over
[x] spinners
[x] accordion
[x] pagination
[x] badges
[x] progress
[x] links

FAQ

Q: Do I need Alpine JS? A: No we have designed the components to use either Alpine JS or LiveView.JS.

Q: What if I want to use my own components too? A: You can install this library and import only the components you need.

# The recommended option is to import every single component
use PetalComponents

# But you can get more granular. eg.

# Import Button so you can now create `<.button>` components
import PetalComponents.Button

# Or just alias if you already have a `def button` HEEX component. With alias you now write the Petal component like this: `<Button.button>`
alias PetalComponents.Button

Q: Does this increase my CSS filesize? A: Tailwind will scan any folders you specify and hoover up CSS classes from files to include in your final CSS file. You specify the folders in tailwind.config.js. By default, we instruct you to just scan the whole Petal Components library:

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

module.exports = {
  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"
  ],

  ... rest of file omitted

You might be worried that if you don’t use every component you’ll have unused CSS classes. But we believe it’s so small it won’t matter. Our petal.build site’s CSS file totals just 25kb.

If you really want to you can instruct Tailwind to just scan the components you use:

"../deps/petal_components/lib/button.ex",
"../deps/petal_components/lib/alert.ex",

Q: Can I customize the components? A: Yes! You can customize the components by overriding the CSS classes. For example, if you want to change the color of the button you can do this:

.pc-button {
  @apply inline-flex items-center justify-center font-semibold tracking-wider uppercase transition duration-150 ease-in-out border-2 rounded-none focus:outline-none;
}
.pc-button--primary {
  @apply text-black border-black bg-primary-400 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50;
}