PhoenixKitHelloWorld.Web.ComponentsLive (PhoenixKitHelloWorld v0.1.6)

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.

Categories

  • Layout — headers, page header, cards
  • Typography & feedback — badges, alerts, stat cards, hero stat card, 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 — standard table, draggable list
  • Modals & overlays — base modal, confirm modal
  • Pagination
  • Time & files — time_ago, age_badge, file_size, file_mtime, page_status_badge
  • Module display — module_card
  • Empty / loading states

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.