Phoenix LiveView components mirroring shadcn/ui

39 components, 22 JS hooks, 3-mode state ownership. Visually faithful, LiveView-native.

Quick Start

Add the dependency and run the installer. That's it.

1. Add dependency

{:phx_shadcn, "~> 0.1.0"}
{:igniter, "~> 0.5"}  # optional, enables auto-setup

2. Install

mix igniter.install phx_shadcn

Patches your web module, CSS theme, and JS hooks automatically.

3. Use components

<.button variant="outline">Click me</.button>
<.dialog id="my-dialog">
  <.dialog_trigger>Open</.dialog_trigger>
  <.dialog_content>Hello!</.dialog_content>
</.dialog>

Buttons

Every variant, every size. All with built-in phx-click-loading states.

Variants

Sizes

Combined

Explore all 39 components

Interactive demos with live code, state mode examples, and event handling.