How do I customize button styles in Petal Components?

Override CSS classes using Tailwind; for example, define custom .pc-button and .pc-button--primary classes in your CSS file to change colors and borders, as shown in the FAQ section.

Petal Components or Bootstrap for Phoenix?

Petal Components is tailored for Phoenix with HEEX integration, making it more seamless for Elixir workflows, while Bootstrap is generic and may require extra setup. Petal uses Tailwind for finer customization.

Can I use Petal Components without Alpine JS?

Yes, you can use Phoenix.LiveView.JS instead, but it only works in live views; for dead views, Alpine JS is necessary for interactive components like dropdowns.

What's the performance impact on my app?

CSS file size is minimal (e.g., 25kb for their demo site), but Tailwind scans all components by default. You can reduce bloat by scanning only used components, as noted in the documentation.

How to install Petal Components in a Phoenix project?

Add it to mix.exs dependencies, run mix deps.get, and update assets/app.css to include Tailwind sources from the deps folder, following the setup instructions provided.

Does Petal Components work with server-side rendering?

Yes, it supports Phoenix's server-side rendering for both live and dead views, but interactive features require client-side JavaScript, which may affect pure SSR setups.

Open-Awesome

Petal Components

MITElixirv3.2.2

A set of HEEX components for Phoenix developers to build beautiful web apps using Tailwind CSS, similar to Bootstrap or MUI.

Visit Website GitHub

1.0k stars101 forks0 contributors

What is Petal Components?

Petal Components is a library of HEEX components for Phoenix developers, enabling the creation of visually appealing web applications with minimal effort. It provides a comprehensive suite of UI elements like buttons, forms, modals, and tables that work seamlessly in both live and dead (controller) views, streamlining the development process. Think of it as Bootstrap or MUI, but written in HEEX using Tailwind CSS classes.

Target Audience

Phoenix developers building web applications who want a pre-built, Tailwind CSS-based component library that integrates with HEEX and works in both LiveView and traditional controller views.

Value Proposition

Developers choose Petal Components for its seamless integration with the Phoenix ecosystem, offering a comprehensive set of HEEX components that reduce boilerplate and accelerate UI development. Its flexibility in JavaScript options (Alpine JS or Phoenix.LiveView.JS) and easy customization via Tailwind CSS classes provide a unique advantage over generic UI libraries.

Overview

Phoenix + Live View HEEX Components

Use Cases

Best For

Phoenix developers needing a ready-to-use component library for building web applications with HEEX and Tailwind CSS.
Teams looking to accelerate UI development in Phoenix projects by reducing custom CSS and component boilerplate.
Projects requiring UI components that work consistently in both LiveView and traditional controller-based views.
Developers who prefer using Alpine JS or Phoenix.LiveView.JS for interactive components like dropdowns and modals.
Building design systems within Phoenix applications with customizable, Tailwind-based components.
Creating visually appealing web applications quickly with pre-styled elements like forms, tables, cards, and alerts.

Not Ideal For

Projects not using Tailwind CSS, as the components are tightly coupled to its utility classes
Teams requiring interactive components in dead views without any JavaScript dependencies
Developers needing a vast ecosystem of third-party plugins or themes beyond core components
Applications with highly customized design systems that prefer not to override CSS classes extensively

Pros & Cons

Pros

Comprehensive HEEX Components

Includes a wide range of UI elements like buttons, forms, modals, and tables, reducing boilerplate for Phoenix developers, as listed in the roadmap.

Tailwind CSS Integration

Built with Tailwind CSS classes, enabling easy styling and customization through standard utility classes, with documentation on overriding styles.

Flexible JavaScript Support

Supports both Alpine JS and Phoenix.LiveView.JS for interactive components, giving developers choice based on their project needs.

Live/Dead View Compatibility

Works seamlessly in both LiveView and controller-based views, streamlining development across different parts of a Phoenix app.

Cons

JavaScript Dependency for Interactivity

Components like dropdowns require JavaScript, and Phoenix.LiveView.JS only works in live environments, forcing Alpine JS for dead views, adding complexity.

Incomplete Form Features

The roadmap shows missing features like input prefix and postfix, which may require custom work for advanced form implementations.

Potential CSS Bloat

Tailwind defaults to scanning all component files, potentially including unused CSS classes, though optimization is possible but manual.

Open Source Alternative To

Petal Components is an open-source alternative to the following products:

MUI

MUI (Material-UI) is a popular React component library that implements Google's Material Design, providing pre-built UI components like buttons, dialogs, and grids for web applications.

Bootstrap

A popular open-source front-end framework for developing responsive, mobile-first websites and web applications.

Frequently Asked Questions

Related Projects

phoenix

Peace of mind from prototype to production

Stars23,024

Forks3,072

Last commit3 days ago

Ash Framework

A declarative, extensible framework for building Elixir applications.

Stars2,422

Forks395

Last commit2 days ago

Hologram

Full stack Elixir web framework that intelligently compiles Elixir client-side code to JavaScript

Stars1,371

Forks104

Last commit4 days ago

n2o

⭕ N2O: Distributed WebSocket Application Server ISO 20922

Stars1,341

Forks167

Last commit11 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub