<p align="center">
  <img src="" height="128">
  <h1 align="center">Petal Components</h1>
  <p align="center">
    Petal is a set of HEEX components that makes it easy for Phoenix developers to start building beautiful web apps.

<p align="center">
  <a href="">
    <img alt="Hex Version" src="">
  <a href="">
    <img alt="Hex Docs" src="">
  <a href="" alt="MIT">
    <img src="" />

<p align="center">
  <a href="">
    <img src=",h_621/v1646543077/petal/demo_nmw8eh.png" height="300" />
  <a href="">
    <img src=",h_621/v1646543453/petal/demo-light_sijqjy.png" height="300" />

<p align="center">
  <a href="">DEMO</a> | <a href="">DOCS</a>

## About

Petal stands for:

* [Phoenix](
* [Elixir](
* [Tailwind CSS](
* [Alpine JS]( (optional)
* [Live View (HEEX)](

Some components like Dropdowns require Javascript to work. We default to Alpine JS (17kb) but you can choose to use `Phoenix.LiveView.JS` as an alternative (though this will only work in live environments like live views or live components).

## Documentation

For full documentation, visit [](

## 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. 

## 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)
- [ ] switch
- [ ] 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
- [ ] tooltips
- [x] avatar
- [x] alerts
- [x] tables
- [x] cards
- [x] breadcrumbs
- [x] modal
- [ ] slide over
- [x] spinners
- [ ] accordian
- [x] pagination
- [x] badges
- [x] progress
- [x] links

## Contributing

Feel free to open a Github issue in this project.

If you'd like to help out we've got a [Phoenix umbrella app]( that allows you to easily contribute to Petal Components (which is installed as a git submodule).