# petal_components v4.1.2 - 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.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.Breadcrumbs](PetalComponents.Breadcrumbs.md)
- [PetalComponents.Button](PetalComponents.Button.md)
- [PetalComponents.ButtonGroup](PetalComponents.ButtonGroup.md)
- [PetalComponents.Card](PetalComponents.Card.md)
- [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.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.Dropdown](PetalComponents.Dropdown.md)
- [PetalComponents.Field](PetalComponents.Field.md)
- [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.Icon](PetalComponents.Icon.md)
- [PetalComponents.Input](PetalComponents.Input.md): Renders pure inputs (no label or errors).

- [PetalComponents.Link](PetalComponents.Link.md)
- [PetalComponents.Loading](PetalComponents.Loading.md)
- [PetalComponents.Marquee](PetalComponents.Marquee.md)
- [PetalComponents.Menu](PetalComponents.Menu.md)
- [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)
- [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.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.Progress](PetalComponents.Progress.md)
- [PetalComponents.Rating](PetalComponents.Rating.md)
- [PetalComponents.Skeleton](PetalComponents.Skeleton.md)
- [PetalComponents.SlideOver](PetalComponents.SlideOver.md)
- [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.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`.