PETAL

The full list: sidebar, tree, calendar, date picker, number field, slider, sortable, file upload, filters, alert dialog, hover card, context menu, resizable panes, scroll area, scrollspy, timeline, collapsible, separator, kbd, empty state and QR code. Every one has a live demo.

<.file_upload> Hand it your allow_upload/3 config and it renders the whole thing. Drop surface, previews, progress, cancel, plain English errors. Four variants: dropzone, compact, avatar, gallery. Drag and drop is LiveView's own. Zero JS in the component.

One struct drives the whole thing - %State{order_by, filters, search, page, page_size}. Wire it to events, or to the URL. In link mode every sort and filter patches the query string, so any table view is a link you can share or bookmark.

language_select is now free. The locale dropdown that used to be Pro: flags optional (a flag is a country, not a language), text triggers via variant="code" or variant="label", aria-current plus a check on the active locale, and it degrades gracefully when unconfigured.

Toast is LiveView-native, not a JS library taped on. Push from the server with send_toast, update the same toast in place for loading to success morphs, add an Undo that pushes a real event back to your LiveView, and anything in put_flash renders as a toast for free.

No JavaScript per chart. You describe it as a map (the ECharts option object), hand it to the component, done. areaStyle: %{color: "petal:fade"} gives you that soft gradient fade in the series' own colour. No callback, no client code, no palette lookup.

The chat kit is the bit I'm happiest with. Your model streams to your LiveView process, you push each delta to the bubble, and the bubble owns its own DOM so nothing clobbers the text as it arrives. Tool calls render as real Phoenix components. Not JSON blobs.

The tooltip is pure CSS. It opens on hover and on keyboard focus, and it renders on a dead page before LiveView even connects. No hook to register, no JS to ship. petal.build/components/toolt…

A reworked type scale plus 7 new text components: lead, blockquote, inline_code, text_large, text_muted, text_small and hr. You can lay out a full page from components alone now. No dropping to raw HTML, no hand-tuned Tailwind on every element.

It also works with Cloudflare R2 and Fly Tigris now. One `endpoint` config line points at either (or any S3-compatible storage) and uploads, downloads and deletes all just work. No new API to learn.

The navigation menu follows the disclosure pattern: plain links inside a button with aria-expanded, Escape and click-away to close. 100% LiveView.JS. Set full_width on an item and you've got a mega menu under your header.

Passkeys ship with two modes out of the box: → Primary auth — passwordless sign-in with Face ID, Touch ID, or a hardware key → 2FA layer — passkey prompt after password login, replacing TOTP One config flag to enable. Up to 5 passkeys per user. Cloned authenticator detection included.

Sign-in page with "Sign in with passkey" button