PhiaUI

Enterprise-ready Phoenix LiveView component library — 119 components, inspired by shadcn/ui.

Ejectable components with zero heavy JS dependencies, full WAI-ARIA accessibility, TailwindCSS v4 semantic tokens, and built-in analytics widgets, enterprise data components, full Calendar & Scheduling Suite, and AI-ready chat UI for financial terminals, BI dashboards, booking platforms, and KPI monitors.

Why PhiaUI?

DaisyUI — CSS-only Tailwind plugin, framework-agnostic, ideal for rapid prototyping. Salad UI — shadcn/ui patterns for Phoenix LiveView, copy-paste via mix salad.install. ShadCN/ui — React/Next.js, Radix UI primitives, the inspiration behind PhiaUI's copy-paste model. Doggo — headless, unstyled, strict WAI-ARIA; bring your own CSS. Mishka Chelekom — feature-rich Phoenix LiveView kit, CLI-generated components, Tailwind v4. Primer Live — GitHub Primer design system for Phoenix LiveView, library dependency model.

Component Library — 119 Components

Primitives & Feedback — 9 components

Stateless HEEx components. No JavaScript. → Full examples & use cases

Form Integration — 12 components

Integrated with Phoenix.HTML.Form and Ecto changesets. → Full examples & use cases

Interactive Components — 17 components

Vanilla JS hooks for accessible behaviors. → Full examples & use cases

Utilities & Composed — 16 components

CSS-only utilities, display patterns, and data viz primitives. → Full examples & use cases

Dashboard & Analytics — 9 components

Enterprise layout shell, data tables, KPI widgets, and chart integration. → Full examples & use cases

Enterprise Components — 10 components

Advanced data management and collaboration UI. → Full examples & use cases

Gap Analysis Components — 15 components

Newly added components identified by gap analysis vs shadcn/ui, Mantine, Ant Design, Chakra UI v3, and MUI. → Full examples & use cases

Input Primitives

Selection & Interaction

Upload & File

Utility & Navigation

Live Sample — PhiaUI Dashboard

See PhiaUI in action with a full enterprise dashboard built entirely from library components:

github.com/charlenopires/PhiaUI-samples

Or follow the step-by-step Dashboard Tutorial to build one from scratch.

Quick Start

1. Install

Add to mix.exs:

def deps do
  [
    {:phia_ui, "~> 0.1.5"}
  ]
end

Run:

mix deps.get
mix phia.install

2. Add the theme

In assets/css/app.css:

@import "tailwindcss";
@import "../../../deps/phia_ui/priv/static/theme.css";

For runtime color theme switching (optional), generate the multi-theme CSS:

mix phia.theme install

This creates assets/css/phia-themes.css and auto-imports it in app.css. Then set data-phia-theme="blue" on any ancestor element to activate that theme.

3. Eject components

mix phia.add button card badge dialog

4. Register hooks

// assets/js/app.js
import PhiaDialog          from "./phia_hooks/dialog"
import PhiaDropdownMenu    from "./phia_hooks/dropdown_menu"
import PhiaTagsInput       from "./phia_hooks/tags_input"
import PhiaRichTextEditor  from "./phia_hooks/rich_text_editor"
import PhiaTooltip         from "./phia_hooks/tooltip"
import PhiaPopover         from "./phia_hooks/popover"
import PhiaToast           from "./phia_hooks/toast"
import PhiaDarkMode        from "./phia_hooks/dark_mode"
import PhiaCommand         from "./phia_hooks/command"
import PhiaDateRangePicker from "./phia_hooks/date_range_picker"
import PhiaChart           from "./phia_hooks/chart"
import PhiaCalendar        from "./phia_hooks/calendar"
import PhiaCarousel        from "./phia_hooks/carousel"
import PhiaContextMenu     from "./phia_hooks/context_menu"
import PhiaDrawer          from "./phia_hooks/drawer"
import PhiaTheme           from "./phia_hooks/theme"
import PhiaResizable       from "./phia_hooks/resizable"
import PhiaMentionInput    from "./phia_hooks/mention_input"
import PhiaCopyButton   from "./phia_hooks/copy_button"
import PhiaEditable     from "./phia_hooks/editable"
import PhiaColorPicker  from "./phia_hooks/color_picker"
import PhiaBackTop      from "./phia_hooks/back_top"
import PhiaAudioPlayer  from "./phia_hooks/audio_player"
import PhiaSonner       from "./phia_hooks/sonner"

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: {
    PhiaDialog, PhiaDropdownMenu, PhiaTagsInput, PhiaRichTextEditor,
    PhiaTooltip, PhiaPopover, PhiaToast, PhiaDarkMode,
    PhiaCommand, PhiaDateRangePicker, PhiaChart,
    PhiaCalendar, PhiaCarousel, PhiaContextMenu, PhiaDrawer,
    PhiaTheme, PhiaResizable, PhiaMentionInput,
    PhiaCopyButton, PhiaEditable, PhiaColorPicker, PhiaBackTop,
    PhiaAudioPlayer, PhiaSonner
  }
})

Hook files are copied to assets/js/phia_hooks/ by mix phia.install.

Usage Examples

Button & Button Group

<.button>Default</.button>
<.button variant="destructive">Delete</.button>
<.button variant="outline" size="sm"><.icon name="download" size={:sm} /> Export</.button>

<%!-- Button Group toolbar --%>
<.button_group>
  <.button variant="outline" size="icon"><.icon name="bold" size={:sm} /></.button>
  <.button variant="outline" size="icon"><.icon name="italic" size={:sm} /></.button>
  <.button variant="outline" size="icon"><.icon name="underline" size={:sm} /></.button>
</.button_group>

→ Button examples | Button Group examples

Form with Validation

<.form for={@form} phx-change="validate" phx-submit="save">
  <.phia_input field={@form[:email]} type="email" label="Email" phx-debounce="blur" />
  <.phia_input field={@form[:name]} label="Name" />
  <.field>
    <div class="flex items-center gap-2">
      <.checkbox id="terms" name="terms" checked={@terms_checked} phx-click="toggle-terms" />
      <.field_label for="terms">I agree to the Terms of Service</.field_label>
    </div>
    <.field_message error={@terms_error} />
  </.field>
  <.button type="submit">Register</.button>
</.form>

→ Form examples

Tabs

<.tabs active="overview">
  <:tab_list>
    <.tabs_trigger tab="overview">Overview</.tabs_trigger>
    <.tabs_trigger tab="analytics">Analytics</.tabs_trigger>
    <.tabs_trigger tab="settings">Settings</.tabs_trigger>
  </:tab_list>
  <.tabs_content tab="overview">
    <p>Overview content here</p>
  </.tabs_content>
  <.tabs_content tab="analytics">
    <p>Analytics content here</p>
  </.tabs_content>
</.tabs>

Step Tracker / Wizard

<.step_tracker>
  <.step status="complete" label="Account" step={1} />
  <.step status="active"   label="Profile"  step={2} description="Fill in your details" />
  <.step status="upcoming" label="Confirm"  step={3} />
</.step_tracker>

→ Step Tracker examples

Navigation Menu

<.navigation_menu>
  <.navigation_menu_list>
    <.navigation_menu_item>
      <.navigation_menu_link href="/" active={@path == "/"}>Home</.navigation_menu_link>
    </.navigation_menu_item>
    <.navigation_menu_item>
      <.navigation_menu_trigger label="Products" />
      <.navigation_menu_content>
        <ul class="grid grid-cols-2 gap-2 p-4">
          <li><a href="/products/web">Web</a></li>
          <li><a href="/products/mobile">Mobile</a></li>
        </ul>
      </.navigation_menu_content>
    </.navigation_menu_item>
  </.navigation_menu_list>
</.navigation_menu>

→ Navigation Menu examples

Filter Bar + Filter Builder

<%!-- Simple filter bar for a table --%>
<.filter_bar>
  <.filter_search placeholder="Search users…" on_search="search_users" />
  <.filter_select label="Status" name="status"
    options={[{"All", ""}, {"Active", "active"}, {"Inactive", "inactive"}]}
    value={@filter_status} on_change="filter_status" />
  <.filter_toggle label="Archived" name="archived"
    checked={@show_archived} on_change="toggle_archived" />
  <.filter_reset on_click="reset_filters" />
</.filter_bar>

<%!-- Advanced query builder --%>
<.filter_builder
  fields={[
    %{name: "status", label: "Status", type: "select",
      options: [{"Active", "active"}, {"Inactive", "inactive"}]},
    %{name: "name",       label: "Name",       type: "text"},
    %{name: "created_at", label: "Created At", type: "date"}
  ]}
  rules={@filter_rules}
  on_add="add_filter_rule"
  on_remove="remove_filter_rule"
  on_change="update_filter_rule"
/>

→ Filter Bar examples | Filter Builder examples

Bulk Action Bar

<.bulk_action_bar count={@selected_count} label="items selected" on_clear="clear_selection">
  <.bulk_action label="Delete"  on_click="bulk_delete"  variant="destructive" icon="trash" />
  <.bulk_action label="Archive" on_click="bulk_archive" icon="archive" />
  <.bulk_action label="Export"  on_click="bulk_export"  icon="download" />
</.bulk_action_bar>

→ Bulk Action Bar examples

Activity Feed

<.activity_feed>
  <.activity_group label="Today">
    <.activity_item
      type="mention"
      name="Alice Martin"
      description="mentioned you in Project Alpha"
      timestamp="2m ago"
    >
      <:avatar><.avatar><.avatar_fallback name="Alice Martin" /></.avatar></:avatar>
    </.activity_item>
    <.activity_item
      type="task"
      name="Bob Chen"
      description="completed task: Deploy to staging"
      timestamp="15m ago"
    />
  </.activity_group>
  <:footer>
    <.button variant="ghost" size="sm" phx-click="load_more">Load more</.button>
  </:footer>
</.activity_feed>

→ Activity Feed examples

Kanban Board

<.kanban_board>
  <.kanban_column label="To Do" count={3}>
    <.kanban_card id="card-1" title="Design review" priority="high">
      <:tags><.badge variant="secondary">Design</.badge></:tags>
    </.kanban_card>
  </.kanban_column>
  <.kanban_column label="In Progress" count={1}>
    <.kanban_card id="card-2" title="API integration" priority="critical">
      <:avatar><.avatar size="sm"><.avatar_fallback name="Dev Team" /></.avatar></:avatar>
    </.kanban_card>
  </.kanban_column>
  <.kanban_column label="Done" count={5} />
</.kanban_board>

→ Kanban Board examples

Chat (AI/Human UI)

<.chat_container id="ai-chat">
  <.chat_message role="assistant" id="msg-0">
    <.chat_bubble role="assistant" timestamp="2:30 PM">
      <:avatar><.avatar size="sm"><.avatar_fallback name="AI" /></.avatar></:avatar>
      Welcome! How can I help you today?
    </.chat_bubble>
    <.chat_suggestions
      suggestions={["What are key features?", "Show me an example"]}
      on_select="select_suggestion"
    />
  </.chat_message>
  <.chat_message role="user" id="msg-1">
    <.chat_bubble role="user" timestamp="2:31 PM">
      What are key features?
    </.chat_bubble>
  </.chat_message>
</.chat_container>

<.chat_input id="chat-compose" on_submit="send_message" placeholder="Ask anything…" />

→ Chat examples

Mention Input

<.mention_input
  id="comment-field"
  name="comment"
  suggestions={@mention_suggestions}
  open={@mention_open}
  search={@mention_search}
  mentioned_ids={@mentioned_ids}
  on_mention="mention_search"
  on_select="mention_select"
  placeholder="Leave a comment… type @ to mention"
/>

def handle_event("mention_search", %{"query" => q}, socket) do
  suggestions = filter_users(q)
  {:noreply, assign(socket, mention_suggestions: suggestions, mention_open: true)}
end

→ Mention Input examples

Alert Dialog (confirmation)

<.alert_dialog id="delete-confirm" open={@show_confirm}>
  <.alert_dialog_header>
    <.alert_dialog_title>Delete item?</.alert_dialog_title>
    <.alert_dialog_description>This action cannot be undone.</.alert_dialog_description>
  </.alert_dialog_header>
  <.alert_dialog_footer>
    <.alert_dialog_cancel phx-click="cancel">Cancel</.alert_dialog_cancel>
    <.alert_dialog_action variant="destructive" phx-click="confirm-delete">
      Delete
    </.alert_dialog_action>
  </.alert_dialog_footer>
</.alert_dialog>

→ Alert Dialog examples

Drawer (side panel / bottom sheet)

<.drawer_content id="filters-panel" open={@filters_open} direction="right">
  <.drawer_header>
    <h2 class="text-lg font-semibold">Filters</h2>
  </.drawer_header>
  <.drawer_close />
  <div class="px-6 pb-6">
    <.filter_builder fields={@fields} rules={@rules}
      on_add="add_rule" on_remove="remove_rule" on_change="update_rule" />
  </div>
  <.drawer_footer>
    <.button phx-click="apply-filters">Apply</.button>
  </.drawer_footer>
</.drawer_content>

→ Drawer examples

Progress & Slider

<%!-- Progress bar --%>
<.progress value={75} max={100} aria-label="Upload progress" />

<%!-- Range slider (form-integrated) --%>
<.form_slider field={@form[:volume]} label="Volume" min={0} max={100} step={1} />

Timeline

<.timeline>
  <.timeline_item status="complete">
    <:icon><.icon name="check-circle" size={:sm} /></:icon>
    <:content>
      <p class="font-medium">Order placed</p>
      <p class="text-sm text-muted-foreground">March 1 at 10:00 AM</p>
    </:content>
  </.timeline_item>
  <.timeline_item status="active">
    <:icon><.icon name="package" size={:sm} /></:icon>
    <:content>
      <p class="font-medium">In transit</p>
      <p class="text-sm text-muted-foreground">Estimated: March 5</p>
    </:content>
  </.timeline_item>
  <.timeline_item status="upcoming">
    <:icon><.icon name="home" size={:sm} /></:icon>
    <:content>
      <p class="font-medium text-muted-foreground">Delivered</p>
    </:content>
  </.timeline_item>
</.timeline>

Avatar with group

<.avatar_group>
  <.avatar :for={user <- @team_members}>
    <.avatar_image src={user.avatar_url} alt={user.name} />
    <.avatar_fallback name={user.name} />
  </.avatar>
</.avatar_group>

→ Avatar examples

Toast notification

<%!-- Mount once in root.html.heex --%>
<.toast id="toast-viewport" />

# Trigger from any LiveView
{:noreply, push_event(socket, "phia-toast", %{
  title: "Saved", description: "Changes saved.", variant: "success"
})}

→ Toast examples

Dashboard with charts

<.metric_grid cols={4}>
  <.stat_card title="MRR"   value="$48,290" trend="up"      trend_value="+12.5%" />
  <.stat_card title="Users" value="2,840"   trend="up"      trend_value="+8.2%" />
  <.stat_card title="Churn" value="3.1%"    trend="down"    trend_value="-0.4%" />
  <.stat_card title="NPS"   value="67"      trend="neutral" trend_value="0" />
</.metric_grid>

<.phia_chart
  id="revenue-chart"
  type={:area}
  title="Monthly Revenue"
  series={[%{name: "MRR", data: @mrr_data}]}
  labels={@month_labels}
  height="320px"
/>

→ Dashboard examples | Full tutorial

Heatmap Calendar

<.heatmap_calendar
  data={@contribution_data}
  rows={7}
  cols={52}
  max_value={10}
  col_labels={@week_labels}
  row_labels={~w(Mon Tue Wed Thu Fri Sat Sun)}
  show_legend={true}
/>

→ Heatmap Calendar examples

InputOTP

<%!-- Simple: --%>
<.input_otp id="verify-code" name="code" length={6} value={@otp_code} />

<%!-- Composable with separator: --%>
<.input_otp_group id="token-group">
  <.input_otp_slot index={0} name="token[0]" value={String.at(@token, 0) || ""} />
  <.input_otp_slot index={1} name="token[1]" value={String.at(@token, 1) || ""} />
  <.input_otp_slot index={2} name="token[2]" value={String.at(@token, 2) || ""} />
  <.input_otp_separator />
  <.input_otp_slot index={3} name="token[3]" value={String.at(@token, 3) || ""} />
  <.input_otp_slot index={4} name="token[4]" value={String.at(@token, 4) || ""} />
  <.input_otp_slot index={5} name="token[5]" value={String.at(@token, 5) || ""} />
</.input_otp_group>

Spinner

<.spinner />
<.spinner size={:lg} class="text-primary" />
<.spinner label="Loading data..." size={:sm} />

NumberInput & PasswordInput

<.form_number_input field={@form[:quantity]} label="Quantity" min={1} max={999} step={1} />
<.form_number_input field={@form[:price]} label="Price" prefix="$" suffix="USD" />

<.form_password_input field={@form[:password]} label="Password" />
<.form_password_input field={@form[:confirm]} label="Confirm Password" autocomplete="new-password" />

CopyButton

<div class="flex items-center gap-2">
  <code class="text-sm bg-muted px-2 py-1 rounded font-mono">{@api_key}</code>
  <.copy_button value={@api_key} label="Copy API key" />
</div>

SegmentedControl

<.segmented_control
  id="view-mode"
  name="view"
  value={@view}
  on_change="change_view"
  segments={[
    %{value: "list",   label: "List"},
    %{value: "grid",   label: "Grid"},
    %{value: "kanban", label: "Kanban"}
  ]}
/>

Chip & ChipGroup

<.chip_group>
  <.chip :for={tech <- @selected_stack}
    value={tech}
    dismissible={true}
    on_dismiss="remove_tech"
    variant={:outline}>
    {tech}
  </.chip>
</.chip_group>

<%!-- Toggle chip --%>
<.chip selected={@dark_mode} on_click="toggle_dark" value="dark">
  Dark Mode
</.chip>

Editable (inline edit)

<.editable id="project-title" value={@project.name} on_submit="update_name">
  <:preview>
    <h1 class="text-2xl font-bold">{@project.name}</h1>
  </:preview>
  <:input>
    <.phia_input id="project-title-input" name="name" value={@project.name} />
  </:input>
</.editable>

FileUpload

<.file_upload upload={@uploads.attachments} label="Attach Files" accept=".pdf,.docx,.xlsx">
  <:empty>
    <.icon name="upload-cloud" class="h-8 w-8 text-muted-foreground mx-auto mb-2" />
    <p class="text-sm text-muted-foreground">
      Drag & drop files here or <span class="text-primary underline">browse</span>
    </p>
  </:empty>
  <:file :let={entry}>
    <.file_upload_entry entry={entry} on_cancel="cancel_upload" />
  </:file>
</.file_upload>

Menubar

<.menubar id="app-menubar">
  <.menubar_menu>
    <.menubar_trigger>File</.menubar_trigger>
    <.menubar_content>
      <.menubar_item on_click="new_file">New File</.menubar_item>
      <.menubar_item on_click="open_file">Open…</.menubar_item>
      <.menubar_separator />
      <.menubar_item on_click="save" shortcut="⌘S">Save</.menubar_item>
    </.menubar_content>
  </.menubar_menu>
  <.menubar_menu>
    <.menubar_trigger>Edit</.menubar_trigger>
    <.menubar_content>
      <.menubar_item on_click="undo" shortcut="⌘Z">Undo</.menubar_item>
      <.menubar_item on_click="redo" shortcut="⌘⇧Z">Redo</.menubar_item>
    </.menubar_content>
  </.menubar_menu>
</.menubar>

MultiSelect

<.form_multi_select
  field={@form[:tags]}
  label="Tags"
  options={[{"Elixir", "elixir"}, {"Phoenix", "phoenix"}, {"LiveView", "liveview"}, {"Ecto", "ecto"}]}
/>

Tree

<.tree id="file-explorer">
  <.tree_item label="lib" expandable={true} expanded={true}>
    <.tree_item label="phia_ui" expandable={true}>
      <.tree_item label="components" expandable={true}>
        <.tree_item label="button.ex" on_click="open_file" value="button.ex" />
        <.tree_item label="card.ex" on_click="open_file" value="card.ex" />
      </.tree_item>
    </.tree_item>
  </.tree_item>
  <.tree_item label="mix.exs" on_click="open_file" value="mix.exs" />
</.tree>

ColorPicker

<.color_picker
  id="brand-color"
  value={@brand_color}
  on_change="update_brand_color"
  swatches={["#1e40af", "#7c3aed", "#dc2626", "#16a34a", "#ea580c"]}
/>

FloatButton

<%!-- Simple --%>
<.float_button icon="plus" on_click="new_item" aria_label="Create new item" />

<%!-- Speed dial --%>
<.float_button position={:bottom_right}>
  <:main icon="menu" aria_label="Actions" />
  <:item icon="edit" on_click="edit" label="Edit" />
  <:item icon="share" on_click="share" label="Share" />
  <:item icon="trash" on_click="delete" label="Delete" />
</.float_button>

BackTop

<%!-- Mount once per page that needs it --%>
<.back_top threshold={300} smooth={true} aria_label="Back to top" />

→ Gap analysis component examples

Calendar & Scheduling Suite — 27 components

The most comprehensive calendar and scheduling system for Phoenix LiveView. → Full examples & use cases

Standard Pickers

Calendar Views

Scheduling & Time

Booking & Specialized

Advanced Dashboard Widgets — 8 components

High-fidelity data visualization and status widgets. → Full examples & use cases

Media, Communication & Navigation — 5 components

Display & Interaction Additions — 3 components

Mix Tasks

# Install core dependencies and setup
mix phia.install

# List all available components
mix phia.list

# Eject specific components into your codebase
mix phia.add button card badge dialog

# Generate the Lucide SVG sprite
mix phia.icons

# Theme management
mix phia.theme list                    # list all 8 color presets
mix phia.theme install                 # generate assets/css/phia-themes.css
mix phia.theme apply zinc              # write theme vars to your theme.css
mix phia.theme export blue             # print JSON (or --format css for CSS)
mix phia.theme import ./my-brand.json  # apply custom theme

Ejectable Architecture

PhiaUI is not a traditional runtime dependency — components are source code you own:

mix phia.add button card dialog toast command carousel drawer

This copies Elixir modules and JS hooks directly into your project. After ejection, you own the code: read it, modify it, delete parts you don't need.

lib/your_app_web/components/ui/button.ex      ← yours to edit
assets/js/phia_hooks/dialog.js                ← yours to edit
assets/js/phia_hooks/carousel.js              ← yours to edit

ClassMerger

The cn/1 function merges Tailwind classes with conflict resolution (last wins per group):

import PhiaUi.ClassMerger, only: [cn: 1]

cn(["px-4 py-2", @class])           # => "px-4 py-2 mt-4" (if @class = "mt-4")
cn(["px-4", "px-8"])                # => "px-8"  (conflict resolved)
cn(["text-red-500", @error && "text-destructive", nil])  # nil filtered out

Backed by an ETS-cached GenServer (ClassMerger.Cache) — zero overhead on repeated calls.

TailwindCSS v4 Theme

The theme provides semantic OKLCH design tokens. Always use tokens, never hardcoded colors:

/* ✓ Use semantic tokens */
bg-primary text-muted-foreground border-border bg-accent

/* ✗ Never hardcode */
bg-gray-900 text-[#333]

Dark mode support via @custom-variant dark (&:where(.dark, .dark *)) — toggle the .dark class on <html> with PhiaDarkMode.

Color presets & runtime theme switching

PhiaUI ships 8 OKLCH color presets: zinc, slate, blue, rose, orange, green, violet, neutral.

Generate the multi-theme CSS file:

mix phia.theme install
# → writes assets/css/phia-themes.css with all 8 [data-phia-theme] selectors
# → injects @import into app.css automatically

Activate a preset at the HTML level:

<html class="dark" data-phia-theme="blue">

Scoped per section via ThemeProvider:

<.theme_provider theme={:blue}>
  <.button>Blue button</.button>
</.theme_provider>

Runtime switching via the PhiaTheme hook:

<select phx-hook="PhiaTheme" id="color-picker">
  <option value="zinc">Zinc</option>
  <option value="blue">Blue</option>
  <option value="rose">Rose</option>
</select>

Anti-FOUC — add to <head> before any stylesheet:

<script>
  (function() {
    var mode = localStorage.getItem(&#39;phia-mode&#39;) || localStorage.getItem(&#39;phia-theme&#39;);
    if (mode === &#39;dark&#39; || (!mode && matchMedia(&#39;(prefers-color-scheme: dark)&#39;).matches)) {
      document.documentElement.classList.add(&#39;dark&#39;);
    }
    var ct = localStorage.getItem(&#39;phia-color-theme&#39;);
    if (ct) document.documentElement.setAttribute(&#39;data-phia-theme&#39;, ct);
  })();
</script>

→ Full theme guide

Use Cases

• Financial terminals — StatCard + MetricGrid + PhiaChart for live P&L, position tracking, risk dashboards
• BI dashboards — ChartShell + PhiaChart wrapping ECharts with consistent card chrome and real-time push_event updates
• SaaS admin panels — Shell + Sidebar + DataGrid + Dialog + Toast for full CRUD interfaces
• KPI monitors — Metric grids with real-time trend indicators and Ctrl+K command palette
• Project management — KanbanBoard + ActivityFeed + BulkActionBar + StepTracker for work tracking
• Data exploration — FilterBar + FilterBuilder + DataGrid for ad-hoc query interfaces
• Team collaboration — MentionInput + ChatMessage for AI-augmented comment threads
• Booking and scheduling — BookingCalendar + TimeSlotGrid + DateRangePicker + CalendarWeekView for complete reservation flows
• Habit and streak tracking — StreakCalendar + BadgeCalendar + HeatmapCalendar for gamified productivity apps
• Project planning — GanttChart + KanbanBoard + ActivityFeed + StepTracker for full project management UI
• Audio & media apps — AudioPlayer with full controls, progress scrubber, volume, and dark mode support
• Internal tools — Form components with Ecto changeset integration and rich text content editing
• Mobile-first apps — Drawer (bottom sheet) + Carousel for mobile UX patterns
• Multilingual apps — Direction wrapper for RTL content (Arabic, Hebrew)

Documentation

Detailed examples and use cases:

Generate API docs locally:

mix docs

Contributing

We value Clarity, Simplicity, and Testability.

• All features require a specification with acceptance criteria before implementation
• TDD: write failing tests first (red → green)
• No Alpine.js, no npm deps for interactivity — vanilla JS hooks only
• cn/1 implemented natively — no tw_merge or similar
• All interactive components require WAI-ARIA roles, states, and keyboard support
• All code passes mix credo --strict without warnings