Build polished LiveView interfaces with ease.

Dizzy is a component library for Phoenix LiveView. Start your next Phoenix LiveView project with a good foundation of accessible, pre-tested, nicely styled components.

Installation Browse components

Explore the component catalog

Browse interactive examples & documentation for each component.

Table A responsive, stream-powered table with semantic headers, body rows, captions, and footers. Date picker A date picker wrapping a minimalist JS library. Button It's a button! Use it when you need to perform an action that doesn't navigate the page. Combobox An editable input for filtering and selecting one or more options in a Phoenix form. Modal A centered modal dialog for focused forms, confirmations, and detail views, with native focus management and LiveView control. Toast Stackable toast notifications with Phoenix flash fallback, titles, four severity levels, and automatic dismissal.

View all components

Become an early Dizzy adopter!

We are in Building Mode™ right now. Pricing, and additional details to follow. Sign up for the wishlist to let be notified when Dizzy is generally available, with occasional product news and updates.

Guiding principles

Native first, semantic HTML, and accessibility

The best ARIA is often no ARIA. Native, semantic HTML is the foundation of building great components.

Minimal JavaScript, performant, battle-hardened

Phoenix JS commands are the preference, followed by the smallest, minimalistic LiveView JS Hooks necessary to get the job done.

Batteries incuded, but yours to adapt

Dizzy components copy-in to your Phoenix app, similar to the great React libraries out there. You own the customizations.

Start building beautiful Phoenix LiveView interfaces.

Follow the installation guide, add only the modules you need, and use the examples as references.