Skip to content
Back to News
release
components
charts

PhiaUI v0.1.16 — Composable Charts, Scheduling, Marketing & More

March 11, 2026

PhiaUI v0.1.16 — The Composable Release

PhiaUI v0.1.16 is our most ambitious infrastructure release. While v0.1.15 added ~90 new user-facing components, v0.1.16 goes deeper — shipping a composable SVG chart engine, a full scheduling/booking toolkit, marketing page builders, and dozens of internal primitives that unlock advanced customization.

This release adds 90+ new modules across 10 categories.

Composable SVG Chart Engine

The headline feature: a visx-inspired composable chart system that renders entirely on the server — zero JavaScript required.

XyChart is the new flagship component. It auto-computes domains, creates scales, and renders mixed series types (bar + line on the same chart):

<.xy_chart
  width={400}
  height={300}
  series={[
    %{name: "Revenue", type: :bar, data: [%{label: "Q1", value: 200}, %{label: "Q2", value: 280}]},
    %{name: "Trend",   type: :line, data: [%{label: "Q1", value: 190}, %{label: "Q2", value: 270}]}
  ]}
  show_grid={true}
  show_legend={true}
/>

Supporting this are 30+ chart primitive modules that can be composed individually:

  • ChartAxis, ChartGrid, ChartLegend — axis rendering, grid lines, legends
  • ChartTooltip, ChartCrosshair — interactive tooltip and crosshair overlays
  • ChartAnnotation, ChartLabel — data point annotations and labels
  • ChartDrilldown, ChartSync — drill-down navigation and synchronized charts
  • ChartTheme, ChartSvgDefs — theming and reusable SVG definitions
  • ChartToolbox, ChartVisualMap, DataZoom — toolbox controls, visual mapping, zoom
  • ResponsiveChart — CSS aspect-ratio wrapper for responsive scaling (zero JS)
  • SparkChart — inline mini-charts (spark_line_chart, spark_area_chart, spark_bar_chart)
  • DeltaBar, MarkerBar — delta indicators and marker-based bar components

This composable approach means you can build any chart layout by assembling primitives — no more being limited to predefined chart types.

Scheduling & Time Slot Components

Seven new components for booking and scheduling UIs:

  • ScheduleView — Calendly-style availability grid with day/week/month views
  • ScheduleEventCard — event card designed for schedule contexts
  • CalendarTimePicker — combined calendar + time selection
  • CalendarWeekView — week-at-a-glance calendar layout
  • TimeSliderPicker — horizontal time ruler/scrubber for time selection
  • TimeSlotGrid — responsive grid of time-slot buttons for appointment booking
  • TimeSlotList — vertical scrollable list of time slots with AM/PM toggle

These join the existing 25+ calendar components and are ready for real booking flows.

Marketing Page Builders

A new marketing category with structured landing page components:

  • HeroSection — structured hero with heading, subheading, CTA buttons, and optional media
  • FeatureSection — responsive grid for displaying feature cards with heading and description
  • Marketing — utility module with reusable marketing page building blocks

Build complete landing pages by composing these sections — no custom layout code needed.

Forms System

A complete form architecture layer:

  • FormLayout — structured form sections with FormSection, FormFieldset, FormGrid, FormRow, FormActions
  • FormField — field wrapper with label, description, and error rendering
  • FormSelects — CheckboxGroup, RadioCard, Cascader, ButtonTransferList, and more
  • Form, Field, Label — low-level form primitives for custom form builders

Navigation Additions

Nine new navigation components:

  • ActionSheet — mobile-style sliding bottom panel
  • AppShell — full application shell with header, sidebar, and footer
  • BackToTop — smooth scroll-to-top button
  • ContextNav — contextual navigation for side panels
  • Menubar — horizontal bar of menus for application-level navigation
  • NavLink — styled navigation link with active state detection
  • NavigationMenu — horizontal navigation menu with optional dropdown panels
  • PageProgress — reading progress bar fixed at top or bottom
  • Thumbnav — thumbnail navigation strip for galleries and slideshows

Display & Surface

New display components for richer content:

  • BadgeGroup — badge + text description combo
  • Comment — blog-style comment with avatar, author, date, body, actions, and nested replies
  • Tag — removable tag with dot indicator and close button
  • Item, Marker — generic list items and status markers
  • AnimatedSurface — rotating border beams, shine effects, cursor-tracked gradients
  • OverlaySurface — scrims, image overlays, gradient overlays, and bottom sheets

Input & Upload Enhancements

  • NumberInput — numeric stepper with prefix/suffix and form integration
  • NativeSelect — styled native <select> wrapper
  • SegmentedControl — multi-option toggle control
  • TextareaEnhanced — advanced textarea with auto-resize and formatting
  • RichTextEditor — rich-text editing component
  • ImageGalleryUpload — multi-image upload with gallery preview
  • UploadButton, UploadCard, UploadProgress, UploadQueue — granular upload UI building blocks
  • FullscreenDrop — full-screen drag-and-drop overlay
  • MultiDrag — multi-select drag-and-drop list

Layout & Typography

  • PageLayout — full-page composition: header / sidebar / main / footer slots
  • NavList — styled list of navigation items
  • SectionHeader, SectionFooter — semantic section header/footer blocks
  • Leader — dot/dash leader fill between label and value (restaurant menu style)

Upgrade Guide

Update your mix.exs:

{:phia_ui, "~> 0.1.16"}

Then run:

mix deps.get
mix compile
mix tailwind phia_demo

All new components are fully compatible with the existing theme system, dark mode, and ECharts integration. No breaking changes from v0.1.15.

All articles