### Implement SaaS pricing section example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/surface.md
A complex example demonstrating the integration of multiple PhiaUI components in a pricing section.
```heex
<.animated_gradient_bg from="#1e1b4b" via="#312e81" to="#1e1b4b" />
```
--------------------------------
### Install PhiaUI Components
Source: https://context7.com/charlenopires/phiaui/llms.txt
Fetch dependencies and run the PhiaUI installer to copy components into your project.
```bash
mix deps.get
mix phia.install
```
--------------------------------
### Real-world Dashboard Example with PhiaUI
Source: https://github.com/charlenopires/phiaui/blob/main/README.md
A practical example of building a dashboard using various PhiaUI components like `stat_card`, `sparkline_card`, `bar_chart`, and `donut_chart`. This showcases component composition for a functional UI.
```elixir
defmodule MyAppWeb.DashboardLive do
use MyAppWeb, :live_view
import PhiaUi.Components.Data
import PhiaUi.Components.Display
def render(assigns) do
~H"""
"""
end
end
```
--------------------------------
### Install PhiaUI and Kino Live Component
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-livebook.md
Install the necessary PhiaUI and kino_live_component packages using Mix.install. Ensure Livebook 0.12+ and Elixir 1.17+ are used.
```elixir
Mix.install([
{:phia_ui, "~> 0.1.11"},
{:kino_live_component, "~> 0.0.5"},
{:kino, "~> 0.14"}
])
```
--------------------------------
### Settings Page Form Example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/forms.md
A comprehensive form example for a settings page, demonstrating various input types, sections, and actions. It includes validation and submission handling.
```heex
<.form for={@form} phx-change="validate" phx-submit="save" id="profile-form">
<.form_section title="Public profile" description="This information will be displayed publicly.">
<.form_grid cols={2}>
<.phia_input field={@form[:first_name]} label="First name" required />
<.phia_input field={@form[:last_name]} label="Last name" required />
<.phia_input field={@form[:username]} label="Username" />
<.phia_input field={@form[:bio]} type="textarea" label="Bio" rows={3} />
<.phia_input field={@form[:website]} type="url" label="Website" />
<.form_section title="Notifications">
<.form_row label="Email updates" description="Receive news and product updates via email.">
<.switch name="notif_email" checked={@form[:notif_email].value} phx-change="toggle" />
<.form_row label="Weekly digest" description="A summary of activity every Monday.">
<.switch name="notif_digest" checked={@form[:notif_digest].value} phx-change="toggle" />
<.form_actions sticky={true}>
<.button variant="outline" phx-click="reset" type="button">Discard changes
<.button type="submit" disabled={not @form.source.valid?}>Save profile
```
--------------------------------
### Launch PhiaUI Visual Editor
Source: https://github.com/charlenopires/phiaui/blob/main/README.md
Starts the local development server for the visual design tool.
```bash
mix phia.design # Opens on http://localhost:4200
```
--------------------------------
### Install color theme
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-dashboard.md
Apply a specific color theme to the PhiaUI components.
```bash
mix phia.theme install blue
```
--------------------------------
### Install PhiaUI Assets
Source: https://github.com/charlenopires/phiaui/blob/main/README.md
Run the phia.install mix task to copy component files, JS hooks, and the CSS theme into your project.
```bash
mix phia.install
```
--------------------------------
### Basic PhiaUI Button Examples
Source: https://context7.com/charlenopires/phiaui/llms.txt
Demonstrates various variants and sizes of the PhiaUI button component.
```heex
<.button>Save
<.button variant="outline" size="sm">Cancel
<.button variant="destructive">Delete account
<.button variant="ghost" size="icon" aria-label="Settings">
<.icon name="settings" />
```
--------------------------------
### Analytics LiveView Setup
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-charts.md
Sets up the LiveView socket with initial data for charts and KPI cards. Requires importing PhiaUi components.
```elixir
defmodule MyAppWeb.AnalyticsLive do
use MyAppWeb, :live_view
import PhiaUi.Components.Data
import PhiaUi.Components.Cards
import PhiaUi.Components.Display
@impl true
def mount(_params, _session, socket) do
{:ok,
socket
|> assign(:categories, ~w[Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec])
|> assign(:revenue_series, [
%{name: "Desktop", data: [120, 200, 150, 80, 250, 190, 210, 180, 230, 270, 300, 320]},
%{name: "Mobile", data: [ 90, 140, 110, 60, 180, 150, 170, 140, 190, 220, 250, 280]}
])
|> assign(:pie_data, [
%{label: "Direct", value: 40},
%{label: "Organic", value: 30},
%{label: "Referral", value: 20},
%{label: "Social", value: 10}
])
|> assign(:heatmap_series, build_heatmap())
|> assign(:heatmap_categories, ~w[Mon Tue Wed Thu Fri Sat Sun])}
end
defp build_heatmap do
hours = ~w[00 04 08 12 16 20]
for h <- hours do
%{name: "#{h}:00", data: Enum.map(1..7, fn _ -> :rand.uniform(20) end)}
end
end
end
```
--------------------------------
### Implement a dashboard KPI section
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/cards.md
Example of using multiple stat cards within a metric grid for a dashboard layout.
```heex
<.page_header title="Overview" description="Key metrics for March 2025" />
<.metric_grid>
<.stat_card
title="Monthly Revenue"
value="$24,500"
delta="+12.5%"
delta_type={:increase}
sparkline_data={@mrr_history}
href="/revenue"
/>
<.stat_card
title="Active Users"
value={number_format(@active_users, compact: true)}
delta="+5.2%"
delta_type={:increase}
sparkline_data={@user_history}
/>
<.stat_card
title="Churn Rate"
value="2.1%"
delta="-0.3%"
delta_type={:decrease}
sparkline_data={@churn_history}
/>
<.stat_card
title="NPS Score"
value="72"
delta="+4"
delta_type={:increase}
/>
```
--------------------------------
### Mix Tasks for Theme Management
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/theme-system.md
CLI commands for listing, installing, applying, and exporting PhiaUI themes.
```bash
# List all built-in presets with primary color values
mix phia.theme list
# Generate phia-themes.css and inject @import into app.css
mix phia.theme install
# Generate only specific themes
mix phia.theme install --themes zinc,blue,rose
# Custom output path
mix phia.theme install --output priv/static/phia-themes.css
# Apply a preset to assets/css/theme.css
mix phia.theme apply zinc
# Export preset as JSON
mix phia.theme export blue > blue.json
# Export preset as CSS (with attribute selectors)
mix phia.theme export blue --format css
# Import a custom theme from JSON
mix phia.theme import ./my-brand.json
```
--------------------------------
### Install PhiaUI Dependencies
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-booking.md
Add the PhiaUI dependency to your mix.exs file.
```elixir
# mix.exs
def deps do
[{:phia_ui, "~> 0.1.5"}]
end
```
--------------------------------
### Install PhiaUI Themes
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/theme-system.md
Run this command to generate the multi-theme CSS file and inject it into your app.css. Ensure the anti-FOUC script is also added.
```bash
mix phia.theme install
```
--------------------------------
### Context Menu
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/overlay.md
A context menu that appears on right-click. This example provides options to open, rename, and delete an item.
```heex
<.context_menu id="row-ctx">\n <:trigger>\n
\n Right-click me\n
\n \n\n <:content>\n <.context_menu_item phx-click="open">Open\n <.context_menu_item phx-click="rename">Rename\n <.context_menu_separator />\n <.context_menu_item variant="destructive" phx-click="delete">Delete\n \n
```
--------------------------------
### Timeline Chart Example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-charts.md
Presents project schedules or event timelines using horizontal bars across a time axis, similar to a Gantt chart. Displays start and finish points for different tasks or phases.
```heex
<.timeline_chart
id="timeline"
data={[
%{label: "Discovery", start: 1, finish: 3},
%{label: "Design", start: 2, finish: 5},
%{label: "Development", start: 4, finish: 10},
%{label: "QA", start: 9, finish: 11},
%{label: "Launch", start: 11, finish: 12}
]}
categories={["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
/>
```
--------------------------------
### Pie Chart Examples
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-charts.md
Illustrates a basic pie chart and a pie chart with leader-line labels. Data is provided as a list of label-value pairs.
```heex
<.pie_chart
id="pie"
data={[
%{label: "Direct", value: 40},
%{label: "Organic", value: 30},
%{label: "Referral", value: 20},
%{label: "Social", value: 10}
]}
/>
```
```heex
<.pie_chart
id="pie-links"
data={@pie_data}
show_link_labels={true}
spacing={2}
corner_radius={4}
/>
```
--------------------------------
### Command Palette Component Setup
Source: https://context7.com/charlenopires/phiaui/llms.txt
A keyboard-accessible command menu that supports grouping commands and displaying empty states. It requires an ID and controls for opening and closing.
```heex
<.command_palette id="cmd" open={@cmd_open} on_close="close_cmd">
<.command_palette_group label="Navigation">
<.command_palette_item icon="home" href="/" shortcut="G H">Dashboard
<.command_palette_item icon="users" href="/users" shortcut="G U">Users
<.command_palette_group label="Actions">
<.command_palette_item icon="plus" phx-click="new_project">New Project
<.command_palette_item icon="upload" phx-click="import">Import data
<.command_palette_empty>No results found.
```
--------------------------------
### Histogram Chart Example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-charts.md
Generates a histogram to show frequency distribution. Allows configuration of the number of bins.
```heex
<.histogram_chart
id="hist"
series={[%{name: "Response Time (ms)", data: [42,85,67,120,95,200,55,73,88,140,110,62]}]}
bins={8}
/>
```
--------------------------------
### Start PhiaUI Visual Editor
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-design.md
Launch the PhiaUI visual editor. You can specify a custom port or prevent the browser from auto-opening.
```bash
mix phia.design # Start on port 4200
mix phia.design --port 4201 # Custom port
mix phia.design --no-open # Don't auto-open browser
```
--------------------------------
### Example Claude Code Prompts for UI Generation
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-design.md
These prompts demonstrate how to describe desired UIs to Claude Code for generating Phoenix LiveView components and pages.
```plaintext
Design a SaaS analytics dashboard with a sidebar, 3 KPI stat cards,
a monthly revenue bar chart, and a data grid of recent orders.
Export as MyAppWeb.DashboardLive.
```
```plaintext
Create a centered login page with email and password inputs,
a "Sign in" button, and a "Forgot password?" link.
Use the card component for the form container.
```
```plaintext
Build a landing page with an animated gradient background,
a glass card hero section, feature cards in a 3-column grid,
a pricing section, and a CTA at the bottom.
```
```plaintext
Design a settings page with tabs for Profile, Account, and
Notifications. Each tab has form sections with appropriate inputs.
Use the settings page template as a starting point.
```
--------------------------------
### Radar Chart Example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-charts.md
Displays a radar chart for multi-dimensional profile comparisons. Requires series data and categories.
```heex
<.radar_chart
id="radar"
series={[
%{name: "Product A", data: [80, 60, 90, 70, 85]},
%{name: "Product B", data: [60, 75, 55, 90, 65]}
]}
categories={["Performance", "Design", "Reliability", "Support", "Value"]}
/>
```
--------------------------------
### Sidebar Navigation Example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/navigation.md
Implement a collapsible fixed sidebar navigation panel within a shell layout. Use the `:sidebar` slot for navigation items and `:brand` for branding.
```heex
<.shell>
<:sidebar>
<.sidebar>
<:brand>
MyApp
<:nav_items>
<.sidebar_item icon="home" href="/" active={@active == :home}>Dashboard
<.sidebar_item icon="users" href="/users" active={@active == :users}>Users
<.sidebar_item icon="bar-chart-2" href="/analytics" active={@active == :analytics}>Analytics
<.sidebar_item icon="settings" href="/settings" active={@active == :settings}>Settings
<:footer_items>
<.sidebar_item icon="help-circle" href="/help">Help
<.sidebar_item icon="log-out" phx-click="logout">Sign out
<:main>
<%= @inner_content %>
```
--------------------------------
### Topbar Navigation Example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/navigation.md
Create a sticky top bar with slots for a mobile sidebar toggle, search input, user actions, and notifications. Use `:left` and `:right` slots for content placement.
```heex
<.topbar>
<:left>
<.mobile_sidebar_toggle target="main-sidebar" />
<.inline_search phx-change="search" />
<:right>
<.dark_mode_toggle />
<.badge_button count={@notifications} phx-click="open_notifications">
<.icon name="bell" />
<.avatar size="sm">
<.avatar_image src={@user.avatar_url} />
<.avatar_fallback name={@user.name} />
```
--------------------------------
### Progress Component Examples
Source: https://context7.com/charlenopires/phiaui/llms.txt
Displays a horizontal progress bar. Customizable with 'value' and 'class' for styling. Use 'labeled_progress' for progress bars with labels and units.
```heex
<.progress value={65} />
<.progress value={@percent} class="h-2 [&>div]:bg-green-500" />
<%!-- Labeled progress --%>
```
```heex
<.labeled_progress label="Storage" value={68} unit="GB used of 100GB" />
```
--------------------------------
### Configure Kino Live Component Endpoint
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-livebook.md
Set up a minimal Phoenix endpoint for kino_live_component to serve static assets and manage component rendering within Livebook. This includes defining the endpoint, session options, and starting the necessary supervisors.
```elixir
defmodule NotebookEndpoint do
use Phoenix.Endpoint, otp_app: :phia_ui_notebook
plug(Plug.Static,
at: "/",
from: {:phia_ui, "priv/static"},
gzip: false
)
socket("/live", Phoenix.LiveView.Socket,
websocket: [connect_info: [session: @session_options]]
)
plug(Plug.Session, @session_options)
plug(:router)
def router(conn, _opts), do: conn
@session_options [
store: :cookie,
key: "_phia_key",
signing_salt: "phia_notebook"
]
end
Application.put_env(:phia_ui_notebook, NotebookEndpoint,
url: [host: "localhost"],
secret_key_base: String.duplicate("a", 64),
live_view: [signing_salt: "phia_salt"],
render_errors: [formats: [html: PhiaUi.ErrorHTML], layout: false],
pubsub_server: PhiaUiNotebook.PubSub,
server: false
)
{:ok, _} = Supervisor.start_link([
{Phoenix.PubSub, name: PhiaUiNotebook.PubSub},
NotebookEndpoint
], strategy: :one_for_one)
```
--------------------------------
### Install Phia Themes CSS
Source: https://github.com/charlenopires/phiaui/blob/main/CHANGELOG.md
Generates the `assets/css/phia-themes.css` file with built-in themes. It automatically imports the file into `assets/css/app.css`. Use `--output` for a custom path and `--themes` to generate a subset.
```bash
mix phia.theme install
mix phia.theme install --output assets/css/custom-themes.css
mix phia.theme install --themes a,b,c
```
--------------------------------
### Bullet Chart Example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-charts.md
A compact progress bar with a target marker, ideal for visualizing Key Performance Indicator (KPI) attainment. It shows current progress against a target and defined ranges.
```heex
<.bullet_chart
id="bullet"
series={[
%{name: "Revenue", data: [78], target: 90, ranges: [60, 80, 100]},
%{name: "Users", data: [63], target: 75, ranges: [50, 70, 100]},
%{name: "Conversions", data: [45], target: 60, ranges: [30, 55, 100]}
]}
/>
```
--------------------------------
### Clone and Set Up PhiaUI Project
Source: https://github.com/charlenopires/phiaui/blob/main/README.md
Use these commands to clone the repository, navigate into the project directory, fetch dependencies, and run initial tests.
```bash
git clone https://github.com/charlenopires/PhiaUI
cd PhiaUI
mix deps.get
mix test
```
--------------------------------
### Render Bar Chart with PhiaUI
Source: https://github.com/charlenopires/phiaui/blob/main/README.md
Quick start example for rendering a bar chart using the PhiaUI bar_chart component. This component renders pure SVG server-side.
```heex
<.bar_chart
id="revenue"
series={[%{name: "Revenue", data: [120, 200, 150, 80, 250, 190]}]}
categories={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
/>
```
--------------------------------
### Import PhiaUI Components in LiveView
Source: https://github.com/charlenopires/phiaui/blob/main/README.md
Import necessary component modules into your LiveView or layout module to start rendering UI elements. Ensure these components are available in your project.
```elixir
defmodule MyAppWeb.PageLive do
use MyAppWeb, :live_view
import PhiaUi.Components.Buttons
import PhiaUi.Components.Feedback
import PhiaUi.Components.Inputs
end
```
--------------------------------
### Add Track Changes to a Rich Editor
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-editor.md
Integrate track changes functionality into a rich text editor. This example shows how to include the track_changes_panel component within a custom rich_editor setup.
```heex
<.rich_editor id="my-editor" name="doc[body]" value={@body}>
<:toolbar>
<.formatting_toolbar editor_id="my-editor" />
<:sidebar>
<.track_changes_panel id="tc-panel" editor_id="my-editor" />
```
--------------------------------
### Create Responsive Layouts
Source: https://github.com/charlenopires/phiaui/blob/main/README.md
Use responsive_stack for horizontal/vertical stacking and container_query for responsive content based on container width.
```heex
<.responsive_stack id="cards" breakpoint="md" direction={:horizontal}>
<.stat_card title="Revenue" value="$42k" />
<.stat_card title="Users" value="8,420" />
<.stat_card title="Orders" value="1,247" />
<.container_query id="sidebar" breakpoints={[sm: 300, md: 500, lg: 800]}>
<:sm>Compact sidebar
<:md>Standard sidebar
<:lg>Full sidebar with details
```
--------------------------------
### List available components
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-dashboard.md
View all available components and their dependencies before ejecting.
```bash
mix phia.add --list
```
--------------------------------
### Calendar Week View Component
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/calendar.md
Displays a week grid with a time axis, positioning events based on their start time and duration. Requires a date within the desired week and a list of events with start times and durations.
```heex
<.calendar_week_view
id="week-view"
date={@week_start}
events={@week_events}
/>
```
--------------------------------
### Get Post by ID
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-cms.md
Retrieves a single post by its unique identifier.
```APIDOC
## GET /api/posts/:id
### Description
Retrieves a specific post by its ID.
### Method
GET
### Endpoint
/api/posts/:id
### Path Parameters
- **id** (integer) - Required - The unique identifier of the post.
### Response
#### Success Response (200)
- **post** (object) - The post object.
- **id** (integer) - The unique identifier of the post.
- **title** (string) - The title of the post.
- **content** (string) - The content of the post.
- **status** (string) - The status of the post (e.g., "draft", "published").
- **inserted_at** (string) - The timestamp when the post was inserted.
- **updated_at** (string) - The timestamp when the post was last updated.
- **author** (object) - The author of the post.
- **id** (integer) - The unique identifier of the author.
- **name** (string) - The name of the author.
#### Response Example
{
"post": {
"id": 1,
"title": "First Post",
"content": "This is the content of the first post.",
"status": "published",
"inserted_at": "2023-10-27T10:00:00Z",
"updated_at": "2023-10-27T10:00:00Z",
"author": {
"id": 101,
"name": "John Doe"
}
}
}
```
--------------------------------
### Generated Login Page LiveView
Source: https://github.com/charlenopires/phiaui/blob/main/README.md
Example of a LiveView module generated using PhiaUI components.
```elixir
defmodule MyAppWeb.LoginLive do
use MyAppWeb, :live_view
import PhiaUi.Components.Cards
import PhiaUi.Components.Inputs
import PhiaUi.Components.Buttons
def render(assigns) do
~H"""
<.card class="w-full max-w-md">
<.card_header>
<.card_title>Sign in
<.card_description>Enter your credentials
<.card_content>
<.phia_input type="email" label="Email" name="email" />
<.phia_input type="password" label="Password" name="password" class="mt-4" />
<.card_footer>
<.button variant="default" class="w-full" phx-click="login">
Sign in
"""
end
end
```
--------------------------------
### floating_menu/1
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/editor.md
Contextual menu floating near the cursor, appearing when the cursor is at the start of an empty line.
```APIDOC
## floating_menu/1
### Description
Contextual menu floating near the cursor. Appears when cursor is at the start of an empty line.
### Attributes
- **id** (:string) - Required - Required for hook
- **target** (:string) - Required - CSS selector of the editor element
- **class** (:string) - Optional - Additional CSS classes
### Usage Example
<.floating_menu id="editor-float" target="#my-editor">
<.toolbar_button icon="image" label="Insert image" />
<.toolbar_button icon="table" label="Insert table" />
```
--------------------------------
### Create Booking Context
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-booking.md
Implement the business logic for service listing, availability, and booking creation.
```elixir
# lib/my_app/bookings.ex
defmodule MyApp.Bookings do
alias MyApp.Repo
alias MyApp.Bookings.Booking
@services [
%{id: "general", name: "General Consultation", duration: "30 min", icon: "stethoscope", price: "$50"},
%{id: "dental", name: "Dental Checkup", duration: "45 min", icon: "smile", price: "$80"},
%{id: "physio", name: "Physiotherapy", duration: "60 min", icon: "activity", price: "$90"},
%{id: "dermatology", name: "Dermatology", duration: "30 min", icon: "shield", price: "$70"}
]
def list_services, do: @services
def find_service(id), do: Enum.find(@services, &(&1.id == id))
# Returns a map of %{Date.t => :available | :unavailable}
def availability_map(from_date, to_date) do
booked_dates = Repo.all(
from b in Booking,
where: b.date >= ^from_date and b.date <= ^to_date,
select: {b.date, count(b.id)},
group_by: b.date
)
|> Map.new()
Date.range(from_date, to_date)
|> Enum.map(fn date ->
day = Date.day_of_week(date) # 1=Mon, 7=Sun
status = cond do
day in [6, 7] -> :unavailable # weekends closed
Date.before?(date, Date.utc_today()) -> :unavailable
Map.get(booked_dates, date, 0) >= 10 -> :unavailable
true -> :available
end
{date, status}
end)
|> Map.new()
end
def available_slots(date) do
booked = Repo.all(from b in Booking, where: b.date == ^date, select: b.time_slot)
all_slots = ~w[09:00 09:30 10:00 10:30 11:00 11:30 14:00 14:30 15:00 15:30 16:00 16:30]
Enum.reject(all_slots, &(&1 in booked))
end
def create_booking(attrs) do
%Booking{}
|> Booking.changeset(attrs)
|> Repo.insert()
end
end
```
--------------------------------
### Implement a Command menu
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/overlay.md
A low-level primitive for building custom command UIs. For full keyboard-accessible palettes, use the Navigation module's command_palette.
```heex
<.command id="inline-cmd">
<.command_input placeholder="Type a command…" />
<.command_list>
<.command_group label="Suggestions">
<.command_item phx-click="new_file">
<.icon name="file-plus" class="mr-2" />New file
<.command_item phx-click="new_folder">
<.icon name="folder-plus" class="mr-2" />New folder
```
--------------------------------
### Import Overlay Components
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/overlay.md
Import the necessary Overlay components from PhiaUi.Components.Overlay.
```elixir
import PhiaUi.Components.Overlay
```
--------------------------------
### Waterfall Chart Example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-charts.md
Visualizes a running total with positive and negative segments. Accepts an explicit list of label-value pairs.
```heex
<.waterfall_chart
id="waterfall"
data={[
%{label: "Q1 Revenue", value: 500_000},
%{label: "New Deals", value: 120_000},
%{label: "Churn", value: -45_000},
%{label: "Upsell", value: 80_000},
%{label: "COGS", value: -200_000},
%{label: "Net", value: 455_000}
]}
/>
```
--------------------------------
### Implement Command Palette
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/navigation.md
Features keyboard navigation and grouping. Requires the PhiaCommand hook.
```heex
<.command_palette id="cmd" open={@cmd_open} on_close="close_cmd">
<.command_palette_group label="Navigation">
<.command_palette_item icon="home" href="/" shortcut="G H">Dashboard
<.command_palette_item icon="users" href="/users" shortcut="G U">Users
<.command_palette_group label="Actions">
<.command_palette_item icon="plus" phx-click="new_project">New Project
<.command_palette_item icon="upload" phx-click="import">Import data
<.command_palette_empty>No results found.
```
```heex
<%!-- Trigger --%>
<.button variant="outline" phx-click="open_cmd" class="gap-2">
<.icon name="search" size="sm" />
Search…
<.kbd>⌘<.kbd>K
```
--------------------------------
### Set PhiaUI theme via Claude Code
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-design.md
Example command to update the UI theme using Claude Code.
```text
Set the theme to rose
```
--------------------------------
### Server-Controlled Dialog
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/overlay.md
Control dialog visibility from the server using `JS.show` and `JS.hide`. This example demonstrates a confirmation dialog for deletion.
```heex
<%!-- Server-controlled dialog --%>\n<.button phx-click={JS.show(to: "#confirm-dialog")}>Delete\n\n<.dialog id="confirm-dialog">\n <:content>\n <.dialog_header>\n <.dialog_title>Confirm deletion\n \n
This action cannot be undone.
\n <.dialog_footer class="mt-4">\n <.button variant="outline" phx-click={JS.hide(to: "#confirm-dialog")}>Cancel\n <.button variant="destructive" phx-click="confirm_delete">Delete\n \n \n
```
--------------------------------
### Flex, Stack, Wrap, and Box Components
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/layout.md
Primitives for spacing and alignment.
```heex
<%!-- Vertical stack --%>
<.stack gap={4}>
<.card>Item 1
<.card>Item 2
<%!-- Horizontal flex --%>
<.flex align={:center} justify={:between} class="border-b px-4 py-2">
Title
<.button size="sm">Action
<%!-- Wrapping flex (tag cloud) --%>
<.wrap gap={2}>
<%= for tag <- @tags do %>
<.badge><%= tag %>
<% end %>
<%!-- Padded box --%>
<.box padding={6} class="border rounded-lg">
Content
```
--------------------------------
### Booking Calendar Initialization and Event Handling
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/calendar.md
Initializes the booking calendar by building an availability map for a specified period and handles date selection events. Updates the socket with selected dates and fetches available slots for that date.
```elixir
def mount(_params, _session, socket) do
# Build availability map for next 90 days
availability = Bookings.availability_map(
Date.utc_today(),
Date.add(Date.utc_today(), 90)
)
{:ok, assign(socket, availability: availability, selected_date: nil)}
end
def handle_event("select-date", %{"date" => iso}, socket) do
date = Date.from_iso8601!(iso)
slots = Bookings.available_slots(date)
{:noreply, assign(socket, selected_date: date, available_slots: slots)}
end
```
--------------------------------
### Implement Contextual Navigation
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/navigation.md
Sidebar navigation for settings or sectioned pages.
```heex
<%= @inner_content %>
```
--------------------------------
### Setup PhiaTheme Hook in LiveSocket
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/theme-system.md
Import and include the PhiaTheme hook in your LiveSocket configuration to enable runtime theme switching.
```javascript
import PhiaTheme from "./phia_hooks/theme"
let liveSocket = new LiveSocket("/live", Socket, {
hooks: { PhiaTheme, PhiaDarkMode, /* other hooks */ }
})
```
--------------------------------
### Render Loading Overlay
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/feedback.md
Display a full-container overlay with a spinner and optional message.
```heex
```
--------------------------------
### Implement spotlight_overlay component
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/surface.md
Displays a full-page radial spotlight that tracks the cursor position.
```heex
<.spotlight_overlay color="rgba(99,102,241,0.15)" />
```
--------------------------------
### Bubble Chart Example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-charts.md
A bubble chart where each point includes a radius `{x, y, r}`. Useful for representing three dimensions of data.
```heex
<.bubble_chart
id="bubble"
series={[
%{name: "Segments", data: [
{1, 2, 10},
{3, 4, 25},
{5, 1, 15},
{2, 5, 20}
]}
]}
/>
```
--------------------------------
### Scatter Chart Example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-charts.md
Renders a scatter chart with X/Y point data. Data points are `{x, y}` tuples within each series.
```heex
<.scatter_chart
id="scatter"
series={[
%{name: "Group A", data: [{1.2, 3.4}, {2.1, 4.5}, {0.8, 2.1}, {3.5, 5.0}]},
%{name: "Group B", data: [{4.0, 1.8}, {5.1, 2.9}, {3.8, 3.2}]}
]}
show_point_labels={false}
/>
```
--------------------------------
### Implement Sortable Grid
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/interaction.md
Creates a grid layout where items can be dragged to any position.
```heex
<.sortable_grid id="widget-grid" cols={4} on_reorder="reorder_widgets">
<%= for widget <- @widgets do %>
<.sortable_grid_item id={"widget-#{widget.id}"} value={to_string(widget.id)}>
<.card class="p-4">{widget.title}
<% end %>
```
--------------------------------
### Breadcrumb Component Example
Source: https://context7.com/charlenopires/phiaui/llms.txt
An accessible breadcrumb trail navigation component. Use ':item' for each level of the trail, with 'href' for navigation links.
```heex
<.breadcrumb>
<:item href="/">Home
<:item href="/products">Products
<:item href="/products/electronics">Electronics
<:item>MacBook Pro
```
--------------------------------
### Dropdown Menu
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/overlay.md
A dropdown menu with items, submenus, separators, and labels. This example shows a menu with edit, duplicate, and delete options.
```heex
<.dropdown_menu id="actions-dd">\n <:trigger>\n <.button variant="ghost" size="icon" aria-label="More options">\n <.icon name="more-horizontal" />\n \n \n\n <:content>\n <.dropdown_menu_item phx-click="edit" phx-value-id={@record.id}>\n <.icon name="pencil" size="sm" class="mr-2" />Edit\n \n <.dropdown_menu_item phx-click="duplicate">\n <.icon name="copy" size="sm" class="mr-2" />Duplicate\n \n <.dropdown_menu_separator />\n <.dropdown_menu_item variant="destructive" phx-click="delete" phx-value-id={@record.id}>\n <.icon name="trash" size="sm" class="mr-2" />Delete\n \n \n
```
--------------------------------
### Import Background Components
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/background.md
Include the background components in your LiveView module.
```elixir
import PhiaUi.Components.Background
```
--------------------------------
### Drawer Component
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/overlay.md
A full-height side panel that slides in from the left or right. This example shows a right-side drawer displaying user details.
```heex
<.drawer id="user-details" side={:right}>\n <:trigger>\n <.button variant="ghost" size="sm">View details\n \n\n <:content>\n
\n \n
```
--------------------------------
### List Available Color Presets
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/theme-system.md
Execute this mix task to view a list of all available built-in color presets for PhiaUI themes.
```bash
mix phia.theme list
```
--------------------------------
### Radial Bar Chart Example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-charts.md
Displays progress arcs concentrically, suitable for multi-metric attainment visualization. Data is provided per series.
```heex
<.radial_bar_chart
id="radial"
series={[
%{name: "Revenue", data: [78]},
%{name: "Users", data: [63]},
%{name: "Conversions", data: [45]}
]}
/>
```
--------------------------------
### Import Surface Component
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/surface.md
Import the base Surface component from the PhiaUi library.
```elixir
import PhiaUi.Components.Surface
```
--------------------------------
### Render Lead Paragraph
Source: https://github.com/charlenopires/phiaui/blob/main/docs/components/typography.md
Use the lead component for introductory text below headings.
```heex
<.heading level={1}>Documentation
<.lead>Everything you need to build enterprise applications with Phoenix LiveView.
```
--------------------------------
### Treemap Chart Example
Source: https://github.com/charlenopires/phiaui/blob/main/docs/guides/tutorial-charts.md
Visualizes hierarchical data using nested rectangles where the area of each rectangle is proportional to its value. Effective for showing part-to-whole relationships.
```heex
<.treemap_chart
id="treemap"
data={[
%{label: "Engineering", value: 60},
%{label: "Marketing", value: 30},
%{label: "Sales", value: 25},
%{label: "Design", value: 15},
%{label: "Support", value: 10}
]}
/>
```
MyApp