petalframework/petal_components

Health v2 · maintenance only

Adoption not part of the score

1052 stars · 101 forks observed · 2026-09-03

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded

Petal Components is an MIT-licensed library of shadcn-style HEEx UI components (buttons, modals, tables, forms, sidebars, chat) for Phoenix LiveView apps, built on Tailwind v4. It ships with a hosted MCP server that exposes component schemas to AI coding tools like Claude Code and Cursor so they generate idiomatic markup.

Use cases

• add prebuilt ui components to a phoenix liveview app
• use shadcn-style components in elixir heex templates
• let claude code or cursor generate correct petal component markup via mcp
• build dashboards with sidebar, table, and modal components
• style phoenix forms and buttons with tailwind v4
• add accessible menus, tree views, and chat components to liveview

When to choose

• you build Phoenix or LiveView apps and want composable, copyable UI primitives
• you use AI coding assistants and want them to emit correct component usage
• you want Tailwind v4 components without React or a JS build step

When to avoid

• you use React, Vue, or another non-Elixir frontend stack
• your project is pinned to Tailwind 3 and you cannot upgrade
• you need a fully managed component product with paid support (consider Petal Pro instead)

Facets

library · maturity active

ui-components templating mcp form-handling accessibility web-development frontend developer-tools elixir browser phoenix liveview heex tailwindcss shadcn-style elixir hex-package ai-coding-tools web-server

Member repositories

For agents

markdown · JSON · MCP: product_card(name="petalframework/petal_components")