Wishlist Dizzy

Component Catalog

Browse interactive examples rendered with the same Dizzy components installed in your Phoenix application.

Start building Explore an example

Components

Alert Core
Invitation sent to alex@example.com.
Alert boxes of various forms and colors, which can optionally be dismissed by the user.
Loading Core
An animated spinner with configurable speed, size, color, and accessible standalone labels.
Skeleton Core
Decorative placeholders for text, images, and structured content while data loads.
Table Core
A list of recent invoices.
Invoice Status Method Amount
Total $1,200.00
A responsive, stream-powered table with semantic headers, body rows, captions, and footers.
Date picker Form

Choose a date in 2026.

A date picker wrapping a minimalist JS library.
Dark mode Utility
Theme controls for light, dark, and system preferences.
Button Core
It's a button! Use it when you need to perform an action that doesn't navigate the page.
Icon Core
Renders an icon, pretty similarly to the base core component icon.
Form Form
A wrapper around Phoenix.Component.form, with a little bit of styling and a requirement for id.
Input Form
HTML input wrapper, for native input types that don't have a dedicated component like checkbox or radio.
File upload Form
A LiveView file upload dropzone with progress, validation errors, previews, and removal controls.
Label Form
You will rarely use Label directly. Dizzy form controls create and associate labels automatically when passed Phoenix form fields. Use Label when you need to compose a form control manually. It is a dependency of every other form control, so installing any of them installs Label automatically.
Checkbox Form

Stores whether product updates are enabled.

Checkbox component to be used for boolean values in forms.
Switch Form

Receive updates when someone replies to your topics.

Receive a summary of forum activity each Monday.

An on/off control with labels, descriptions, semantic colors, size options, and Phoenix form integration.
Radio group Form
Notification frequency

Choose how often to receive a summary.

A native radio group for selecting one of a set of options.
Select Form

This controls the member's workspace permissions.

A native select for choosing a value from a list of options.
Combobox Form

Choose the person responsible for this task.

An editable input for filtering and selecting one or more options in a Phoenix form.
Badge Core
Default Outline Neutral Success Warning Danger
Compact labels or badges to indicate status.
Accordion App
Notification settings
Choose which product updates and account alerts you receive.
Privacy & security
Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, and review active sessions.
Billing & subscription
Manage your plan, payment method, and billing history.
An accordion implemented with native HTML details and summary elements.
Content editable App
Quarterly planning
Inline editing with slotted display content, an internal Phoenix form, native input or textarea controls, and save and cancel actions.
Drawer App

Project details

Review the current status and owner.
Project
Component library
Owner
Alex Morgan
Status
In progress
A modal panel that slides from a viewport edge, with native dialog focus management and four placements.
Modal App

Project details

Review the current owner and status before continuing.
Project
Component library
Owner
Alex Morgan
Status
In progress
A centered modal dialog for focused forms, confirmations, and detail views, with native focus management and LiveView control.
Dropdown App

Project details

Review the project name and current status.

Dizzy / Component library / Prototype

An action menu with keyboard navigation, icons, grouped items, descriptions, and shortcut hints.
Popover App
A floating panel for interactive content, opened by click, hover, or focus.
Tabs App
OverviewActivitySettings
This is a third page!
Tab component that is designed to patch or navigate within or between LiveViews.
Tooltip Utility
Phoenix LiveView
Show a little tooltip on hover.
Sparkles Utility

Add sparkles to inline content .

Decorative animated sparkles around inline content, with configurable count, size, color, and duration.
Toast UI
Stackable toast notifications with Phoenix flash fallback, titles, four severity levels, and automatic dismissal.
LiveToast UI
Installs LiveToast with its default presentation, programmatic notifications, streams, actions, and multiple containers.

Explore Dizzy