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.
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.
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 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.
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.
Everything related to text. Headings, paragraphs and links
A LiveView to test the accessibility of Petal Components using :a11y_audit.