Changelog

All notable changes to AvenUI are documented here. Format follows Keep a Changelog.

[0.2.3] — 2026-03-24

Added

data_table/1 component — rich data table with filter bar + server-side sort
- Filter bar with dt_search/1 and dt_select/1 sub-components
- Active filter chips with individual remove buttons
- Server-side sort — fires phx-click event, developer handles the query
- Integrated pagination with row count ("Showing 1–20 of 243")
- Empty state adapts: "No data yet" vs "No results match your filters"
- :toolbar slot for action buttons (New, Export, etc.)
- Row hover-reveal actions
AvenUI.DataTable struct — state helper for filter/sort/pagination
- DataTable.new/1 — create initial state
- DataTable.set_filter/2 — update filter params, strips blank values
- DataTable.toggle_sort/2 — flip sort direction or change field
- DataTable.set_page/2 / reset_page/1 — pagination control
- DataTable.put_total/2 — set total count from database
- DataTable.total_pages/1, offset/1, filtered?/1, filter_value/2

Changed

Component count: 23 → 24 (data_table)
mix aven_ui.add --all now includes data_table
use AvenUI, :components now imports AvenUI.Components.DataTable

Usage

<.data_table id="users" rows={@rows} table={@table}
  title="Users" on_filter="dt_filter" on_sort="dt_sort" on_paginate="dt_paginate">
  <:filter>
    <.dt_search name="search" placeholder="Search users…" />
    <.dt_select name="status" prompt="All statuses"
      options={[{"Active", "active"}, {"Inactive", "inactive"}]} />
  </:filter>
  <:toolbar>
    <.button size="sm" phx-click="new_user">New user</.button>
  </:toolbar>
  <:col :let={u} label="Name" field="name" sortable><%= u.name %></:col>
  <:col :let={u} label="Email" field="email" sortable><%= u.email %></:col>
  <:action :let={u}>
    <.button size="xs" variant="ghost" phx-click="edit" phx-value-id={u.id}>Edit</.button>
  </:action>
</.data_table>

# LiveView
alias AvenUI.DataTable

def mount(_, _, socket) do
  {:ok, socket |> assign(:table, DataTable.new(per_page: 20)) |> load_rows()}
end

def handle_event("dt_filter", params, socket) do
  table = socket.assigns.table |> DataTable.set_filter(params) |> DataTable.reset_page()
  {:noreply, socket |> assign(:table, table) |> load_rows()}
end

def handle_event("dt_sort", %{"field" => field}, socket) do
  table = DataTable.toggle_sort(socket.assigns.table, field)
  {:noreply, socket |> assign(:table, table) |> load_rows()}
end

def handle_event("dt_paginate", %{"page" => page}, socket) do
  table = DataTable.set_page(socket.assigns.table, String.to_integer(page))
  {:noreply, socket |> assign(:table, table) |> load_rows()}
end

[0.2.2] — 2026-03-23

Added

DatePicker component (date_picker/1) — calendar-based date input
- Single date mode and date range mode (mode="range")
- Server-rendered calendar grid — no JS date library required
- Month navigation via LiveView events
- min_date / max_date constraints
- Works with Phoenix.HTML.FormField
- Built-in label, hint, error display, today shortcut, clear button
AvenUIDatePicker JS hook — open/close and clear button wiring
mix aven_ui.new project generator
- Runs mix phx.new then wires AvenUI automatically
- Installs all 23 components via mix aven_ui.add --all
- Configures app.css for Tailwind v4
- Wires AvenUIHooks into app.js
- Injects component imports into web.ex
- Starter layout: navbar + sidebar + dashboard home page
- Dark mode toggle wired out of the box

Changed

Component count: 22 → 23
mix aven_ui.add --all now includes date_picker

Usage

# Project generator
mix aven_ui.new my_app
mix aven_ui.new my_saas --no-ecto
cd my_app && mix phx.server

# Single date picker
<.date_picker id="dob" name="dob" label="Date of birth"
  selected={@date} view_month={@dp_month} on_change="date_picked" />

# Date range picker
<.date_picker id="stay" name="stay" label="Stay dates" mode="range"
  range_start={@check_in} range_end={@check_out}
  view_month={@dp_month} on_change="date_picked" />

[0.2.1] — 2026-03-23

Added

Combobox component (combobox/1) — searchable select field
- Client-side filtering for static option lists (instant, no server round-trip)
- Server-side search via on_search="event_name" + phx-debounce
- Works with Phoenix.HTML.FormField (field={@form[:country]})
- Built-in label, hint, and error display
- Accessible: role="listbox", role="option", aria-expanded, aria-selected
AvenUICombobox JS hook — keyboard navigation for the combobox
- ArrowDown / ArrowUp — navigate options
- Enter — select highlighted option
- Escape — close and return focus to trigger
- Click outside to close
- Fires native change event so phx-change works on the hidden input

Changed

mix aven_ui.add --all now includes combobox
use AvenUI, :components now imports AvenUI.Components.Combobox
Component count: 21 → 22

Usage

<%# Static options — client filters instantly %>
<.combobox
  id="country"
  name="country"
  placeholder="Search countries…"
  options={[
    %{value: "th", label: "Thailand"},
    %{value: "sg", label: "Singapore"},
    %{value: "jp", label: "Japan"},
  ]}
  selected={@country}
/>

<%# Server-side search %>
<.combobox
  id="user"
  name="user_id"
  placeholder="Search users…"
  options={@users}
  selected={@user_id}
  on_search="search_users"
/>

[0.2.0] — 2026-03-22

Added

Tailwind v4 / Phoenix 1.8 support — avenui.css now includes a @theme {} block that registers all avn-* tokens as native Tailwind v4 utilities (bg-avn-purple, text-avn-foreground, rounded-avn-lg, shadow-avn, etc.)

Changed

Dropped Tailwind v3 support — AvenUI now requires Tailwind v4 and Phoenix 1.8+
tailwind.config.js removed — no longer needed with Tailwind v4
avenui.css restructured with @layer base and @layer components for correct Tailwind v4 cascade layer integration
Dark mode tokens moved to @layer base (correct v4 approach)
mix aven_ui.add next-steps output updated to show v4 CSS setup

Migration from 0.1.x → 0.2.0

Update assets/css/app.css — replace the old three imports:

/* Remove: */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Replace with: */
@import "tailwindcss";
@import "../../deps/aven_ui/assets/css/avenui.css";
@source "../../deps/aven_ui/lib";

Delete assets/tailwind.config.js — not needed in Tailwind v4.

[0.1.1] — 2026-03-20

Changed

Improved README with accessibility documentation and component count
Updated hex.pm description to clarify the shadcn-style code ownership model

[0.1.0] — 2026-03-18

Added

Initial release — 21 Phoenix LiveView components: Accordion, Alert, Avatar, Badge, Button, Card, CodeBlock, Dropdown, EmptyState, Input, Kbd, Modal, Progress, Separator, Skeleton, Spinner, Stat, Table, Tabs, Toast, Toggle
8 JS hooks: Dropdown, Modal, Tooltip, Flash, AutoResize, CopyToClipboard, InfiniteScroll, ScrollTop
mix aven_ui.add — shadcn-style installer, copies source into your project
mix aven_ui.list — lists all available components
CSS design tokens with full dark mode support
Tailwind preset via assets/tailwind.config.js
MIT license

← Previous Page AvenUI — 29+ Phoenix LiveView Components