# petal_components v4.15.4 - Table of Contents

> Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.

## Pages

- [README](readme.md)
- [Build a streaming AI chat](streaming_chat.md)
- [petal_components - rules for AI coding assistants](rules.md)
- [Upgrade Guide](upgrade_guide.md)

## Modules

- [PetalComponents](PetalComponents.md): Importing `use PetalComponents` brings the core component set into scope as
unqualified function components (`<.button>`, `<.modal>`, `<.table>`, …).
- [PetalComponents.Accordion](PetalComponents.Accordion.md)
- [PetalComponents.Alert](PetalComponents.Alert.md)
- [PetalComponents.AlertDialog](PetalComponents.AlertDialog.md): The confirm/cancel decision dialog: one question, two answers, no way out
without picking one. "Publish these changes?", "Discard unsaved edits?",
"Delete this account?".
- [PetalComponents.Aurora](PetalComponents.Aurora.md)
- [PetalComponents.Avatar](PetalComponents.Avatar.md)
- [PetalComponents.Badge](PetalComponents.Badge.md)
- [PetalComponents.BorderBeam](PetalComponents.BorderBeam.md): An animated beam of light that travels along the border of its container.
Pure CSS (`offset-path` animation) — no JavaScript required.
- [PetalComponents.BorderPlasma](PetalComponents.BorderPlasma.md): 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.
- [PetalComponents.BrandIcon](PetalComponents.BrandIcon.md): 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.
- [PetalComponents.Breadcrumbs](PetalComponents.Breadcrumbs.md)
- [PetalComponents.Button](PetalComponents.Button.md)
- [PetalComponents.ButtonGroup](PetalComponents.ButtonGroup.md)
- [PetalComponents.Calendar](PetalComponents.Calendar.md): 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.
- [PetalComponents.Card](PetalComponents.Card.md)
- [PetalComponents.Carousel](PetalComponents.Carousel.md): Provides a versatile and customizable carousel component.
- [PetalComponents.Chart](PetalComponents.Chart.md): Declarative charts powered by Apache ECharts, themed by your design tokens.
- [PetalComponents.Chat](PetalComponents.Chat.md): 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.
- [PetalComponents.Collapsible](PetalComponents.Collapsible.md): One disclosure region: a trigger row that shows and hides the content under it.
- [PetalComponents.ColorSchemeSwitch](PetalComponents.ColorSchemeSwitch.md): Light / dark / system colour-scheme switching, in three faces.
- [PetalComponents.ComboBox](PetalComponents.ComboBox.md): A searchable select: type to filter, arrow keys to move, Enter to choose.
- [PetalComponents.Command](PetalComponents.Command.md): 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.
- [PetalComponents.Confetti](PetalComponents.Confetti.md): 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.
- [PetalComponents.Container](PetalComponents.Container.md)
- [PetalComponents.ContextMenu](PetalComponents.ContextMenu.md): A right-click menu attached to a region of the page.
- [PetalComponents.DataTable](PetalComponents.DataTable.md): A full data table composed around `PetalComponents.Table`: sortable
columns, paging, loading and empty states - driven entirely by a
`PetalComponents.DataTable.State`.
- [PetalComponents.DataTable.Engine.List](PetalComponents.DataTable.Engine.List.md): The in-memory engine: sort, filter and paginate a plain list of maps or
structs against a `PetalComponents.DataTable.State`.
- [PetalComponents.DataTable.State](PetalComponents.DataTable.State.md): The data table's entire backend contract in one struct.
- [PetalComponents.DatePicker](PetalComponents.DatePicker.md): 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.
- [PetalComponents.Dropdown](PetalComponents.Dropdown.md): The panel that hangs off a trigger, and the rows that go inside it.
- [PetalComponents.Empty](PetalComponents.Empty.md): The empty state: what a list, table, inbox or search renders when it has
nothing to show.
- [PetalComponents.Field](PetalComponents.Field.md)
- [PetalComponents.FileUpload](PetalComponents.FileUpload.md): 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.
- [PetalComponents.Filters](PetalComponents.Filters.md): A schema-driven filter bar: the active filters as removable chips, plus an
"Add filter" popover that walks field -> operator -> value.
- [PetalComponents.Form](PetalComponents.Form.md): Everything related to forms: inputs, labels etc
- [PetalComponents.Helpers](PetalComponents.Helpers.md): For any helper functions used across multiple components. Ideally we keep this empty - components should be copy-pastable.

- [PetalComponents.HeroiconsV1.Outline](PetalComponents.HeroiconsV1.Outline.md): Icon name can be the function or passed in as a type eg.
- [PetalComponents.HeroiconsV1.Solid](PetalComponents.HeroiconsV1.Solid.md): Icon name can be the function or passed in as a type eg.
- [PetalComponents.HoverCard](PetalComponents.HoverCard.md): 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.
- [PetalComponents.Icon](PetalComponents.Icon.md)
- [PetalComponents.Input](PetalComponents.Input.md): Renders pure inputs (no label or errors).
- [PetalComponents.InputGroup](PetalComponents.InputGroup.md)
- [PetalComponents.InputOtp](PetalComponents.InputOtp.md)
- [PetalComponents.Kbd](PetalComponents.Kbd.md): 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.
- [PetalComponents.LanguageSelect](PetalComponents.LanguageSelect.md): A locale switcher - the language dropdown a multilingual app puts in its
header or footer.
- [PetalComponents.Link](PetalComponents.Link.md)
- [PetalComponents.Loading](PetalComponents.Loading.md)
- [PetalComponents.LocalTime](PetalComponents.LocalTime.md): 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`.
- [PetalComponents.Marquee](PetalComponents.Marquee.md)
- [PetalComponents.Menu](PetalComponents.Menu.md): The vertical navigation list: menu items from plain maps, current-page
highlighting, groups, and nested sub-menus.
- [PetalComponents.Meteors](PetalComponents.Meteors.md): 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.
- [PetalComponents.Modal](PetalComponents.Modal.md): 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.
- [PetalComponents.NavigationMenu](PetalComponents.NavigationMenu.md): 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.
- [PetalComponents.NumberField](PetalComponents.NumberField.md): A numeric spinbutton: one real input on the input-group surface, with
decrement and increment buttons, clamping, and a full keyboard map.
- [PetalComponents.NumberTicker](PetalComponents.NumberTicker.md): 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.
- [PetalComponents.Pagination](PetalComponents.Pagination.md): 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.

- [PetalComponents.PaginationInternal](PetalComponents.PaginationInternal.md)
- [PetalComponents.Popover](PetalComponents.Popover.md)
- [PetalComponents.Progress](PetalComponents.Progress.md): Determinate progress in two shapes, sharing one API.
- [PetalComponents.QrCode](PetalComponents.QrCode.md): A QR code rendered as pure server-side SVG - zero JavaScript, crisp at any
size, themeable with `currentColor`, and it prints.
- [PetalComponents.Rating](PetalComponents.Rating.md): Ratings, two ways
- [PetalComponents.Resizable](PetalComponents.Resizable.md): Split-pane layout groups with draggable, keyboard-operable dividers.
- [PetalComponents.ScrollArea](PetalComponents.ScrollArea.md): A themed scroll container, so an overflow region looks like it belongs to
the design system instead of inheriting whatever the OS decided.
- [PetalComponents.Scrollspy](PetalComponents.Scrollspy.md): Scroll-position-aware navigation: the "On this page" rail that sits beside a
long docs article and highlights the section you are currently reading.
- [PetalComponents.Separator](PetalComponents.Separator.md): A hairline divider for app UI, with an optional inline label.
- [PetalComponents.ShineBorder](PetalComponents.ShineBorder.md): A subtle animated shimmer that sweeps around the border of its container.
Pure CSS — no JavaScript, and it respects `prefers-reduced-motion`.
- [PetalComponents.Showcase](PetalComponents.Showcase.md): Single-source component examples.
- [PetalComponents.Showcase.Example](PetalComponents.Showcase.Example.md): One showcase example.
- [PetalComponents.Showcase.Frame](PetalComponents.Showcase.Frame.md): The shared presentation shell for showcase examples - the piece that makes the
dev playground and petal.build render example blocks identically.
- [PetalComponents.Showcase.Registry](PetalComponents.Showcase.Registry.md): The index of every showcase module.
- [PetalComponents.Sidebar](PetalComponents.Sidebar.md): 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.
- [PetalComponents.Skeleton](PetalComponents.Skeleton.md): Loading placeholders, compose-first.
- [PetalComponents.SlideOver](PetalComponents.SlideOver.md): 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.
- [PetalComponents.Slider](PetalComponents.Slider.md): A styled range slider, in single-thumb and dual-thumb (range) forms.
- [PetalComponents.SocialButton](PetalComponents.SocialButton.md): The provider sign-in button - "Continue with Google" and its siblings,
so auth pages stop hand-rolling them.
- [PetalComponents.Sortable](PetalComponents.Sortable.md): A drag-to-reorder list or grid.
- [PetalComponents.Sparkline](PetalComponents.Sparkline.md): A tiny inline trend line rendered as pure server-side SVG — zero JavaScript,
works everywhere (stat cards, table cells, emails).
- [PetalComponents.SpotlightCard](PetalComponents.SpotlightCard.md): A card with a radial glow that follows the cursor — a subtle "premium"
hover effect for feature grids and pricing cards.
- [PetalComponents.Stepper](PetalComponents.Stepper.md)
- [PetalComponents.Svg](PetalComponents.Svg.md): SVG helper components.

- [PetalComponents.Table](PetalComponents.Table.md)
- [PetalComponents.Tabs](PetalComponents.Tabs.md)
- [PetalComponents.TextAnimation](PetalComponents.TextAnimation.md): Animated text effects for hero sections and landing pages.
- [PetalComponents.Timeline](PetalComponents.Timeline.md): A record of things that happened, in order: activity feeds, deploy logs,
order tracking, audit trails, company history.
- [PetalComponents.Toast](PetalComponents.Toast.md): 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.
- [PetalComponents.ToggleGroup](PetalComponents.ToggleGroup.md)
- [PetalComponents.Tooltip](PetalComponents.Tooltip.md)
- [PetalComponents.Tree](PetalComponents.Tree.md): A hierarchical tree view: the file-explorer staple.
- [PetalComponents.Typography](PetalComponents.Typography.md): Everything related to text. Headings, paragraphs and links

- [PetalComponents.UserDropdownMenu](PetalComponents.UserDropdownMenu.md)
- [PetalComponentsWeb.A11yLive](PetalComponentsWeb.A11yLive.md): A LiveView to test the accessibility of Petal Components using `:a11y_audit`.

