Modules
Importing use PetalComponents brings the core component set into scope as
unqualified function components (<.button>, <.modal>, <.table>, …).
The confirm/cancel decision dialog: one question, two answers, no way out without picking one. "Publish these changes?", "Discard unsaved edits?", "Delete this account?".
An animated beam of light that travels along the border of its container.
Pure CSS (offset-path animation) — no JavaScript required.
A border of whispery, warping light: long thin washes of colour ride a
hairline rim, whole corners swell and dissipate on their own clocks, and
by default a soft halo spills past the border onto the page. Set
glow="inside" to keep every layer inside a crisp silhouette, or
glow="both" for the halo and the inner wash together. Pure CSS (registered custom properties driving one shared
gradient field through a stack of differently-masked layers) — 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.
A server-rendered month grid built on Elixir's Date. No time, no timezone,
no DateTime: values in and out are %Date{} and anything posted is ISO 8601.
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.
One disclosure region: a trigger row that shows and hides the content under it.
Light / dark / system colour-scheme switching, in three faces.
A searchable select: type to filter, arrow keys to move, Enter to choose.
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.
A right-click menu attached to a region of the page.
A full data table composed around PetalComponents.Table: sortable
columns, paging, loading and empty states - driven entirely by a
PetalComponents.DataTable.State.
The in-memory engine: sort, filter and paginate a plain list of maps or
structs against a PetalComponents.DataTable.State.
The data table's entire backend contract in one struct.
A text input with a <.calendar> in a panel underneath it. The input shows a
formatted date you can type into; the form always posts ISO 8601.
The panel that hangs off a trigger, and the rows that go inside it.
The empty state: what a list, table, inbox or search renders when it has nothing to show.
A dropzone family that renders a Phoenix.LiveView upload end to end: the
drop surface, the file list with previews and progress, cancel buttons, and
human-readable errors.
A schema-driven filter bar: the active filters as removable chips, plus an "Add filter" popover that walks field -> operator -> value.
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.
A rich preview panel that opens when the pointer rests on its trigger, or when the keyboard focus lands inside it. Think the GitHub profile preview: hover a username and a card with an avatar, a bio line and a follow button fades in. Pure CSS - no JavaScript, no hook.
Renders pure inputs (no label or errors).
A keyboard-key chip: the little cap you put next to a menu item, in a command palette trigger, or down the side of a shortcuts cheat sheet.
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.
The vertical navigation list: menu items from plain maps, current-page highlighting, groups, and nested sub-menus.
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.
This is the general dialog, and it is light-dismissible on purpose - close
button, backdrop click, Escape. When the user must actually answer, and
walking away would leave it ambiguous what happened, reach for
PetalComponents.AlertDialog.alert_dialog/1 instead: it asks one question
with two answers and ignores backdrop clicks.
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 numeric spinbutton: one real input on the input-group surface, with decrement and increment buttons, clamping, and a full keyboard map.
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.
Determinate progress in two shapes, sharing one API.
A QR code rendered as pure server-side SVG - zero JavaScript, crisp at any
size, themeable with currentColor, and it prints.
Ratings, two ways
Split-pane layout groups with draggable, keyboard-operable dividers.
A themed scroll container, so an overflow region looks like it belongs to the design system instead of inheriting whatever the OS decided.
Scroll-position-aware navigation: the "On this page" rail that sits beside a long docs article and highlights the section you are currently reading.
A hairline divider for app UI, with an optional inline label.
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.
The app-shell navigation sidebar: a fixed rail of grouped links that collapses to icons on desktop and takes over as a sheet on mobile.
Loading placeholders, compose-first.
An edge-attached panel - a "sheet" - for forms and detail views that don't warrant a
full page. origin decides which edge it slides from.
A styled range slider, in single-thumb and dual-thumb (range) forms.
The provider sign-in button - "Continue with Google" and its siblings, so auth pages stop hand-rolling them.
A drag-to-reorder list or grid.
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.
A record of things that happened, in order: activity feeds, deploy logs, order tracking, audit trails, company history.
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.
A hierarchical tree view: the file-explorer staple.
Everything related to text. Headings, paragraphs and links
A LiveView to test the accessibility of Petal Components using :a11y_audit.