Renders a visual divider/separator.

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders the footer with three-section layout.

When no slots are provided, auto-populates from config:

• :start falls back to config :copyright
• :end_ falls back to config :app_version

Examples

<%!-- Minimal: reads from config --%>
<.footer />

<%!-- Explicit content --%>
<.footer>
  <:start>&copy; 2026 My App</:start>
  <:end_>v1.0.0</:end_>
</.footer>

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• start - Left section (falls back to config :copyright).
• center - Center section.
• end_ - Right section (falls back to config :app_version).

Inline script that reads persisted UI preferences from localStorage and applies the corresponding classes before the page paints, preventing a flash of unstyled content.

default_mode is the mode used on first visit, when localStorage has no theme-mode entry yet. Must be "light", "dark", or "auto". "auto" resolves to light/dark via prefers-color-scheme at runtime.

Examples

<.fouc_prevention_script />
<.fouc_prevention_script default_mode="auto" />

Attributes

• default_mode (:string) - Defaults to "light". Must be one of "light", "dark", or "auto".

Renders the main layout container (below navbar).

Examples

<.layout>
  <.sidebar>...</.sidebar>
  <.main>...</.main>
  <.footer>...</.footer>
</.layout>

Attributes

• id (:string) - Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders the layout content wrapper.

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders the layout inner container (sidebar + content).

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders the main content area.

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders the top navbar.

Examples

<.navbar>
  <:start>
    <.navbar_burger target="sidebar" />
    <div class="pa-header__brand"><h1>My App</h1></div>
  </:start>
  <:center>
    <div class="pa-header__title"><h2>Dashboard</h2></div>
  </:center>
  <:end_>
    <.navbar_profile_btn name="John Doe" phx-click={toggle_profile_panel()} />
  </:end_>
</.navbar>

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• start - Left section: burger, brand, nav.
• center - Center section: page title.
• end_ - Right section: nav, notifications, profile.

Renders the brand/logo section in the navbar.

Examples

<.navbar_brand>My App</.navbar_brand>

<.navbar_brand logo="/images/logo.svg">My App</.navbar_brand>

Attributes

• logo (:string) - Logo image URL (falls back to config :app_logo). Defaults to nil.
• logo_alt (:string) - Logo alt text. Defaults to "".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block - Brand content (falls back to config :app_name).

Renders the burger menu button for sidebar toggle.

Attributes

• target (:string) - ID of the sidebar element to toggle. Defaults to "sidebar".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders a dropdown menu for a navbar_nav_item.

Examples

<.navbar_dropdown>
  <.navbar_nav_item href="/products">All Products</.navbar_nav_item>
  <.navbar_nav_item href="/categories">Categories</.navbar_nav_item>
</.navbar_dropdown>

Attributes

• is_level2 (:boolean) - Second-level nested dropdown. Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a navigation link group in the navbar.

Examples

<.navbar_nav>
  <.navbar_nav_item href="/">Dashboard</.navbar_nav_item>
  <.navbar_nav_item href="/settings">Settings</.navbar_nav_item>
</.navbar_nav>

<.navbar_nav position="end">
  <.navbar_nav_item href="/help">Help</.navbar_nav_item>
</.navbar_nav>

Attributes

• position (:string) - Nav position variant. Defaults to "start". Must be one of "start", or "end".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a navigation item within navbar_nav.

Examples

<.navbar_nav_item href="/dashboard">Dashboard</.navbar_nav_item>

<.navbar_nav_item has_dropdown>
  Products
  <:dropdown>
    <.navbar_dropdown>
      <.navbar_nav_item href="/products">All</.navbar_nav_item>
    </.navbar_dropdown>
  </:dropdown>
</.navbar_nav_item>

Attributes

• href (:string) - Defaults to "#".
• has_dropdown (:boolean) - Whether this item has a dropdown submenu. Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["navigate", "patch"].

Slots

• inner_block (required)
• dropdown - Dropdown submenu content (use with has_dropdown).

Renders the profile button in the navbar.

Examples

<.navbar_profile_btn name="John Doe" />

<.navbar_profile_btn name="John Doe" phx-click={toggle_profile_panel()}>
  <:icon><img src="/avatar.jpg" /></:icon>
</.navbar_profile_btn>

Attributes

• name (:string) - User display name. Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• icon - Custom icon/avatar content.

Renders the search widget in the navbar.

Typically opens a command palette on click.

Examples

<.navbar_search />

<.navbar_search placeholder="Search..." phx-click={show_command_palette()} />

Attributes

• placeholder (:string) - Defaults to "Search...".
• size (:string) - Defaults to nil.Must be one of nil, "xs", "sm", "md", "lg", or "xl".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders the page title in the navbar center section.

Examples

<.navbar_title>Dashboard</.navbar_title>

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a single notification item within notifications.

Examples

<.notification_item variant="success" icon="fa-solid fa-check">
  <:title>Build completed</:title>
  <:text>Production deployment finished</:text>
  <:time>15 minutes ago</:time>
</.notification_item>

Attributes

• variant (:string) - Defaults to nil.Must be one of nil, "primary", "secondary", "success", "warning", "danger", or "info".
• icon (:string) - Icon class (e.g. 'fa-solid fa-check'). Defaults to nil.
• is_unread (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• title - Notification title.
• text - Notification body text.
• time - Timestamp text.

Renders a notifications bell button with dropdown panel.

Examples

<.notifications count={3}>
  <.notification_item variant="primary" icon="fa-solid fa-file-pen">
    <:title>New task assigned</:title>
    <:text>Review the Q4 report by end of week</:text>
    <:time>2 minutes ago</:time>
  </.notification_item>
</.notifications>

Attributes

• id (:string) - Defaults to "notifications".
• count (:integer) - Badge count (nil = no badge). Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block - Notification items.
• footer_ - Footer content (e.g. 'View all' link).

Renders a hidden input containing the page context as JSON.

JS hooks read this synchronously via getPageContext() instead of fetching from APIs. CSP-safe (no inline scripts with data).

Examples

<.page_context />

<.page_context extra={%{"user" => %{"id" => 1}}} />

Attributes

• extra (:map) - Additional context to merge (from app assigns). Defaults to %{}.
• Global attributes are accepted.

Renders a content section with optional heading.

Examples

<.section title_text="My Section">
  Section content here.
</.section>

Attributes

• title_text (:string) - Section heading text (renders as h3). Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders the sidebar navigation.

Examples

<.sidebar>
  <.sidebar_item href="/" icon="📊" label="Dashboard" is_active />
  <.sidebar_item href="/users" icon="👥" label="Users" />
</.sidebar>

Attributes

• id (:string) - Defaults to "sidebar".
• is_sticky (:boolean) - Defaults to false.
• is_icon_collapse (:boolean) - Defaults to false.
• is_resizable (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a sidebar menu item (link).

Examples

<.sidebar_item href="/dashboard" icon="📊" label="Dashboard" is_active />

Attributes

• href (:string) - Defaults to "#".
• icon (:string) - Icon text, emoji, or HTML. Defaults to nil.
• label (:string) (required)
• is_active (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["phx-click", "navigate", "patch"].

Renders a collapsible sidebar submenu item.

Examples

<.sidebar_submenu icon="📋" label="Tables">
  <.sidebar_item href="/tables" icon="📊" label="Standard" />
  <.sidebar_item href="/tables-lazy" icon="⚡" label="Lazy Loading" />
</.sidebar_submenu>

Attributes

• id (:string) - Defaults to nil.
• icon (:string) - Defaults to nil.
• label (:string) (required)
• is_open (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

@spec toggle_notifications(String.t()) :: Phoenix.LiveView.JS.t()

JS command to toggle the notifications panel.

@spec toggle_sidebar(String.t()) :: Phoenix.LiveView.JS.t()

JS command to toggle the sidebar visibility.

@spec toggle_submenu(String.t()) :: Phoenix.LiveView.JS.t()

JS command to toggle a submenu open/closed.