PhoenixKitHelloWorld.Web.ComponentsLive (PhoenixKitHelloWorld v0.2.2)

Copy Markdown View Source

Showcase of PhoenixKit core components.

This page demonstrates how to use components from PhoenixKitWeb.Components.Core.* so you can copy-paste the patterns into your own modules. Every section includes a live example plus the source snippet in a <details> block.

Page structure

The page has two halves separated by <.section_divider>: raw daisyUI markup first, then the PhoenixKit core component that wraps it. The pairs are deliberate — form_inputs_section → form_helpers_section, tables_section → table_default_section, pagination_section → pagination_component_section, empty_states_section → empty_state_section. Read a pair top-to-bottom to see what the core component buys you.

The page title and subtitle come from the page_title / page_subtitle assigns — the admin layout renders them. This page renders no header of its own; see the "UI & Layout Conventions" section in AGENTS.md.

Categories

  • Typography & feedback — badges, alerts, stat cards, number formatter
  • Buttons & icons — all variants, pk_link_button
  • Navigation — nav tabs, collapse (daisyUI), pk_link
  • Forms — input, select, textarea, checkbox, simple_form
  • Tables & lists — raw table, table_default, draggable list
  • Modals & overlays — base modal, confirm modal
  • Pagination — raw join buttons, pagination, load_more
  • Time & files — time_ago, age_badge, file_size, file_mtime, page_status_badge
  • Module display — module_card
  • Empty / loading states — raw markup, empty_state

Import pattern

PhoenixKit core components are in PhoenixKitWeb.Components.Core.*. LiveViews that use PhoenixKitWeb, :live_view get icon/1, form helpers (input, select, textarea, checkbox, simple_form), pk_link, and draggable_list automatically. For anything else, import the specific module you need:

import PhoenixKitWeb.Components.Core.FileDisplay
import PhoenixKitWeb.Components.Core.LanguageSwitcher
import PhoenixKitWeb.Components.Core.Modal, only: [confirm_modal: 1]
import PhoenixKitWeb.Components.Core.NavTabs
import PhoenixKitWeb.Components.Core.NumberFormatter
import PhoenixKitWeb.Components.Core.StatCard, only: [stat_card: 1]
import PhoenixKitWeb.Components.Core.TimeDisplay

File organization

The render function is a flat list of <.x_section /> calls. Each section is a private function component defined below. To find or modify a section, jump to its defp <name>_section/1 definition — they appear in the same order as the render. New sections: add a <.your_section /> to render and define the matching defp your_section/1 below.