Component Catalog

Start building Explore an example

Works well with AI, but crafted by hand Copy-in components WCAG 2.1 AA compliance

Components

Link Core

Installation Phoenix link documentation Patch this page

Use a link whenever you navigate to a new page or patch the current LiveView.

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.

Label Form

Full name (required) Enter your name as it appears on your account.

Label component to be called by the other form elements.

Textarea Form

Message

Include the details needed to reproduce the issue.

Textarea component for multi-line text fields.

Checkbox Form

Product updates Stores whether product updates are enabled.

Product tips

Checkbox component to be used for boolean values in forms.

Radio group Form

Notification frequency

Choose how often to receive a summary.

In real time

Daily summary

Weekly summary

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

Select Form

Role

This controls the member's workspace permissions.

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

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.

Tabs App

Overview Activity Settings

This is a third page!

Tab component that is designed to patch or navigate within or between LiveViews.

Tooltip Utility

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.