# petalframework/petal_components

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/petalframework-petal-components).**

1,036 stars · 101 forks · Elixir · MIT

## Links

- GitHub: https://github.com/petalframework/petal_components
- Homepage: https://petal.build/components
- awesome-repositories: https://awesome-repositories.com/repository/petalframework-petal-components.md

## Topics

`components` `phoenix` `tailwindcss`

## Description

This framework provides a comprehensive library of reusable, accessible UI components designed for server-side rendered web applications. It enables developers to build interactive interfaces by synchronizing state between the server and the browser, ensuring that markup and data remain consistent without requiring complex client-side logic.

The project distinguishes itself through deep integration with artificial intelligence, offering tools that expose component schemas and interface definitions to coding assistants. This allows for automated discovery and implementation of UI elements, while built-in command-line utilities further accelerate development by automating project configuration and providing pre-built code snippets for common interface structures.

Beyond its core library, the framework includes extensive support for form handling, including localized validation and accessible input controls. It also provides robust styling mechanisms that resolve utility class conflicts at runtime, alongside specialized components for managing data tables, navigation menus, and interactive overlays.

Security and compliance are integrated directly into the component lifecycle, featuring automated accessibility checks, rate limiting for authentication routes, and tools for managing user data privacy. The framework is designed to be installed and configured within existing server-side environments to support rapid, consistent interface development.

## Tags

### Web Development

- [Client-Server State Synchronization](https://awesome-repositories.com/f/web-development/client-server-state-synchronization.md) — Maintains UI consistency by pushing granular DOM updates from the server to the client over persistent connections.
- [Interactive Web Component Libraries](https://awesome-repositories.com/f/web-development/interactive-web-component-libraries.md) — Provides a collection of reusable, accessible UI components specifically designed for server-side rendered Phoenix LiveView applications.

### Software Engineering & Architecture

- [UI Component Development](https://awesome-repositories.com/f/software-engineering-architecture/component-based-development/ui-component-development.md) — Builds interactive web interfaces using reusable components that synchronize state between server and browser in real time.
- [UI Component Compositions](https://awesome-repositories.com/f/software-engineering-architecture/modular-program-composition/function-composition/ui-component-compositions.md) — Encapsulates UI logic into reusable, stateless templates that accept data attributes for consistent rendering.

### User Interface & Experience

- [Component-Based UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries/component-based-ui-libraries.md) — Provides a library of composable interface primitives for server-side rendered HTML templates.
- [Accessible Component Suites](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/accessible-component-suites.md) — Offers a collection of interactive UI elements designed for accessibility and server-side state integration.
- [Tailwind Component Collections](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-component-collections.md) — Ships a comprehensive set of pre-styled interface elements built with Tailwind CSS utility classes for consistent design.
- [Form Input Controls](https://awesome-repositories.com/f/user-interface-experience/form-input-controls.md) — Provides accessible form controls that automatically display validation errors based on data changes. ([source](https://github.com/petalframework/petal_components/blob/main/CHANGELOG.md))
- [Accessible Form Patterns](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/accessible-form-patterns.md) — Implements accessible web forms with automated validation feedback integrated into server-side data structures.
- [Server-Side Template Engines](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/server-side-rendering-engines/server-side-template-engines.md) — Generates HTML structures on the server that automatically reflect application state changes.
- [UI Component Composition](https://awesome-repositories.com/f/user-interface-experience/ui-component-composition.md) — Constructs interactive web pages using a library of pre-built, composable interface elements that integrate into server-side pages. ([source](https://github.com/petalframework/petal_components/blob/main/rules.md))
- [Accessible Component Libraries](https://awesome-repositories.com/f/user-interface-experience/accessible-component-libraries.md) — Provides a library of UI components optimized for compliance with modern accessibility standards and assistive technology support. ([source](https://petal.build/components/roadmap))
- [Dynamic Data Tables](https://awesome-repositories.com/f/user-interface-experience/dynamic-data-tables.md) — Renders complex tabular data with support for custom columns, dynamic content, and empty states.
- [Interactive UI Overlays](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-overlays.md) — Manages modals, slide-overs, and dropdown menus with custom lifecycle hooks for smooth transitions. ([source](https://github.com/petalframework/petal_components/blob/main/CHANGELOG.md))
- [Navigation Menu Management](https://awesome-repositories.com/f/user-interface-experience/navigation-menu-management.md) — Provides tools to construct horizontal or vertical navigation structures, including flyout panels and mega menus. ([source](https://github.com/petalframework/petal_components/blob/main/CHANGELOG.md))
- [Class Merging](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling/class-merging.md) — Resolves conflicting CSS utility classes at runtime to ensure predictable visual output.
- [UI Component Management](https://awesome-repositories.com/f/user-interface-experience/ui-component-management.md) — Organizes complex content and guides user workflows using functional building blocks like tabs, accordions, and steppers. ([source](https://github.com/petalframework/petal_components/blob/main/CHANGELOG.md))
- [User Notification Preference Centers](https://awesome-repositories.com/f/user-interface-experience/user-notification-preference-centers.md) — Enables end-users to manage communication settings and delivery channels while enforcing mandatory alerts for security-critical events. ([source](https://petal.build/petal-pro))

### Artificial Intelligence & ML

- [Streaming AI Conversational Interfaces](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-chat-clients/streaming-chat-responses/streaming-ai-conversational-interfaces.md) — Supports streaming AI-generated chat responses with integrated message history and tool execution. ([source](https://github.com/petalframework/petal_components/blob/main/CHANGELOG.md))
- [AI-Driven Component Discovery](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-driven-component-discovery.md) — Exposes interface definitions to external tools to enable automated discovery and implementation of UI elements.

### Development Tools & Productivity

- [AI Coding Assistants](https://awesome-repositories.com/f/development-tools-productivity/ai-coding-assistants.md) — Integrates coding assistants with component libraries to automate the discovery and management of interface elements.
- [Server-Side](https://awesome-repositories.com/f/development-tools-productivity/component-inspectors/server-side.md) — Manages the lifecycle of interactive overlays and transitions directly on the server.

### Security & Cryptography

- [Data Privacy Management](https://awesome-repositories.com/f/security-cryptography/data-privacy-management.md) — Provides self-service tools for users to download personal data or request account deletion through automated background processes. ([source](https://petal.build/petal-pro))
- [Authentication Security](https://awesome-repositories.com/f/security-cryptography/governance-policy-frameworks/compliance-governance/security-and-compliance/authentication-security.md) — Protects authentication routes with automated rate limiting and integrates error tracking to maintain system stability. ([source](https://petal.build/petal-pro))