Overview:

Petal is a framework that combines Phoenix, Elixir, Tailwind CSS, Alpine JS, and Live View (HEEX) to create a powerful and customizable component library. With Petal, you can easily build beautiful and interactive user interfaces for your web applications. It provides a range of components like dropdowns, forms, buttons, menus, alerts, tables, and more. Petal offers flexibility by allowing you to use either Alpine JS or LiveView.JS for component interaction, and you can customize the components by overriding the CSS classes.

Features:

• Phoenix, Elixir, and Tailwind CSS: Petal is built on the foundation of these powerful technologies, ensuring performance, scalability, and a sleek design.
• Alpine JS (optional): Petal supports Alpine JS as the default option for interactive components.
• Live View (HEEX): Petal provides Live View support for real-time rendering and seamless user interaction.
• Rich Component Library: With Petal, you have access to a comprehensive library of components including dropdowns, forms, buttons, menus, alerts, tables, and more.
• VSCode Snippets Extension: Install Petal’s VSCode extension to gain access to over 65 snippets for all the components, making development faster and more efficient.
• Customization: Petal allows you to easily customize the components by overriding the CSS classes, giving you complete control over the look and feel of your application.
• Easy Contribution: Petal provides a Phoenix umbrella app that allows developers to contribute to the Petal Components library by creating and submitting new components.

Installation:

To install Petal, follow these steps:

1. Start by creating a new Phoenix project:

mix phx.new my_app
cd my_app

2. Add Petal as a dependency in your mix.exs file:

defp deps do
  [
    {:petal, "~> 1.0"}
  ]
end

3. Fetch and compile the dependency:

mix deps.get
mix deps.compile

That’s it! You now have Petal installed and ready to use in your Phoenix project.

Summary:

Petal is a powerful framework that combines Phoenix, Elixir, Tailwind CSS, and Live View to provide a comprehensive component library for building beautiful and interactive user interfaces. It offers flexibility by supporting both Alpine JS and LiveView.JS for component interaction and allows for easy customization through CSS class overrides. With Petal, developers can quickly create sleek and responsive web applications while leveraging the power of Phoenix and Elixir.