Modules
Importing use PetalComponents brings the core component set into scope as
unqualified function components (<.button>, <.modal>, <.table>, …).
An animated beam of light that travels along the border of its container.
Pure CSS (offset-path animation) — no JavaScript required.
Brand glyphs for the providers apps sign in with - inline SVGs, no icon font, no asset pipeline, no JavaScript. Heroicons deliberately ships no logos, so these live here.
Provides a versatile and customizable carousel component.
Declarative charts powered by Apache ECharts, themed by your design tokens.
AI chat / conversation components — the LiveView-native answer to React's AI Elements / assistant-ui. Build streaming chat UIs without a client AI SDK: tokens stream over the LiveView socket you already have.
Light / dark / system colour-scheme switching, in three faces.
A command palette — the ⌘K menu. Type to filter, arrow keys to move,
Enter to run. Items are real links and buttons, so navigate, patch
and any phx-* binding work exactly as they do everywhere else in
LiveView.
A confetti cannon for celebration moments — completed onboarding, first payment, level up. Rendered as an invisible mount point; bursts are drawn on a temporary full-screen canvas with zero dependencies.
Everything related to forms: inputs, labels etc
For any helper functions used across multiple components. Ideally we keep this empty - components should be copy-pastable.
Icon name can be the function or passed in as a type eg.
Icon name can be the function or passed in as a type eg.
Renders pure inputs (no label or errors).
A locale switcher - the language dropdown a multilingual app puts in its header or footer.
Timestamps rendered in the visitor's own timezone, language and calendar -
no server timezone tables, no JavaScript date library. The server renders
a semantic <time datetime="..."> carrying the UTC instant; the
PetalLocalTime hook formats it client-side with the browser's Intl.
A shower of meteors streaking across the parent container. Pure CSS — positions, delays and durations are generated server-side, so the effect costs zero JavaScript.
A horizontal navigation menu with flyout panels — the pattern marketing sites use for "Products / Solutions / Resources" menus that hold more than a simple dropdown can.
A number that counts up (or down) to its value when it scrolls into view, and re-animates whenever the value changes — perfect for stats sections and live dashboards.
Pagination is the method of splitting up content into discrete pages. It specifies the total number of pages and inidicates to a user the current page within the context of total pages.
Ratings, two ways
A subtle animated shimmer that sweeps around the border of its container.
Pure CSS — no JavaScript, and it respects prefers-reduced-motion.
Single-source component examples.
One showcase example.
The shared presentation shell for showcase examples - the piece that makes the dev playground and petal.build render example blocks identically.
The index of every showcase module.
Loading placeholders, compose-first.
The provider sign-in button - "Continue with Google" and its siblings, so auth pages stop hand-rolling them.
A tiny inline trend line rendered as pure server-side SVG — zero JavaScript, works everywhere (stat cards, table cells, emails).
A card with a radial glow that follows the cursor — a subtle "premium" hover effect for feature grids and pricing cards.
SVG helper components.
Animated text effects for hero sections and landing pages.
Toasts with the modern interaction grammar: a collapsed stack that
expands on hover, per-toast timeout progress, pause on hover, swipe to
dismiss, and six positions - plus the LiveView-native parts nobody else
has: server-pushed toasts, id-addressed updates (morph a loading toast
into a success one), action buttons that push LiveView events, and an
automatic put_flash bridge.
Everything related to text. Headings, paragraphs and links
A LiveView to test the accessibility of Petal Components using :a11y_audit.