Cinder UI
Hex HexDocs

Forge beautiful interfaces with Phoenix

Production-ready components inspired by shadcn/ui. Typed HEEx APIs, seamless LiveView integration, and one-command installation.

v0.1.0 101 components
Explore Components Get Started

Components that shine

A growing library of production-ready components, each with typed APIs and composable slots.

Actions.button_group

Grouped primary + secondary actions.

  <.button_group>
  <.button>Deploy</.button>
  <.button variant={:outline}>Rollback</.button>
</.button_group>

Forms.field

Label + input + helper text using the shared token model.

Used for release announcements.

  <.field>
  <:label><.label for="site-email">Team email</.label></:label>
  <.input id="site-email" placeholder="team@example.com" />
  <:description>Used for release announcements.</:description>
</.field>

Feedback.alert

Status messaging aligned with upstream alert patterns.

  <.alert>
  <.icon name="circle-alert" class="size-4" />
  <:title>Release ready</:title>
  <:description>All quality checks passed.</:description>
</.alert>

Navigation.tabs

Tab primitives with server-driven active state.

Use components directly in HEEx templates. 
  <.tabs value="overview">
  <:trigger value="overview">Overview</:trigger>
  <:trigger value="api">API</:trigger>
  <:content value="overview">Use components in HEEx.</:content>
  <:content value="api">Typed attrs/slots with compile-time checks.</:content>
</.tabs>

Start building

Two steps to production-ready components. Full installation guide.

1. Add dependencies to mix.exs 

  def deps do
  [
    {:cinder_ui, "~> 0.1.0"},
    {:lucide_icons, "~> 2.0"} # optional, recommended for <.icon />
  ]
end

2. Fetch and install

  mix deps.get
mix cinder_ui.install --skip-existing

Why Cinder UI?

Phoenix-native
Typed HEEx function components with predictable attrs, slots, and composable primitives built for LiveView.
One-command setup
Single installer wires Tailwind sources, component CSS, and optional LiveView hooks into existing projects.
shadcn-aligned
Broad API surface aligned with shadcn/ui conventions, tokens, and theming.
Production tested
Unit, browser, and visual regression coverage keeps components stable as your app evolves.