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