PhoenixKitWeb.Components.Core.UserDashboardHeader (phoenix_kit v1.7.105)

Copy Markdown View Source

Provides a unified user dashboard header component with title, subtitle, and action slots.

Use this component in custom user dashboard pages for consistent page-level headers with titles and action buttons.

Examples

<%!-- Basic --%>
<.user_dashboard_header title="My Profile" />

<%!-- With subtitle --%>
<.user_dashboard_header title="Security" subtitle="Manage your account security" />

<%!-- With actions --%>
<.user_dashboard_header title="My Posts">
  <:actions>
    <.pk_link_button navigate={~p"/dashboard/posts/new"} variant="primary">
      New Post
    </.pk_link_button>
  </:actions>
</.user_dashboard_header>

<%!-- Rich title content --%>
<.user_dashboard_header>
  <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-base-content">Order #123</h1>
  <p class="text-sm text-base-content/60 mt-0.5">Placed 2 days ago</p>
</.user_dashboard_header>

Attributes

  • title - Page title as a string attribute
  • subtitle - Page subtitle as a string attribute

Slots

  • :inner_block - Custom title/subtitle markup (overrides title/subtitle attrs)
  • :actions - Action buttons rendered on the right side

Summary

Functions

user_dashboard_header(assigns)

Attributes

  • title (:string) - Defaults to nil.
  • subtitle (:string) - Defaults to nil.

Slots

  • inner_block
  • actions