PhiaUi.Components.Item (phia_ui v0.1.17)

Versatile list item component with media, title, description, and trailing actions.

Provides a consistent layout for list items across the application — settings rows, contact lists, notification items, file browsers, and more. Pure HEEx, no JavaScript required.

Components

Function	Element	Purpose
`item/1`	`div`/`a`	Container with media, content, actions
`item_title/1`	`p`	Primary text, `font-medium`
`item_description/1`	`p`	Secondary text, `text-muted-foreground`

Variants

Variant	Style
`"default"`	Transparent background, hover accent
`"outline"`	Border with `border-border`
`"muted"`	`bg-muted/50` background

Basic example

<.item>
  <:media><.avatar src="/avatar.jpg" fallback="JD" /></:media>
  <.item_title>John Doe</.item_title>
  <.item_description>Software Engineer</.item_description>
  <:trailing>
    <.badge>Admin</.badge>
  </:trailing>
</.item>

As a link

<.item navigate={~p"/users/42"}>
  <.item_title>View Profile</.item_title>
  <.item_description>Click to open</.item_description>
</.item>

Summary

Functions

item(assigns)

Renders a versatile list item with optional media, content, and trailing actions.

item_description(assigns)

Renders secondary description text inside an item/1.

item_title(assigns)

Renders the primary title text inside an item/1.

Functions

item(assigns)

Renders a versatile list item with optional media, content, and trailing actions.

Examples

<.item>
  <.item_title>Settings</.item_title>
  <.item_description>Manage your account</.item_description>
</.item>

<.item variant="outline" navigate={~p"/profile"}>
  <:media><.icon name="user" /></:media>
  <.item_title>Profile</.item_title>
  <:trailing><.icon name="chevron-right" size={:sm} /></:trailing>
</.item>

Attributes

variant (:atom) - Visual variant. Defaults to :default. Must be one of :default, :outline, or :muted.
href (:string) - Renders as an <a> tag. Defaults to nil.
navigate (:string) - LiveView navigate. Defaults to nil.
patch (:string) - LiveView patch. Defaults to nil.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. Additional HTML attributes.

Slots

media - Leading avatar, icon, or thumbnail.
inner_block (required) - Main content area.
trailing - Trailing metadata or actions.

item_description(assigns)

Renders secondary description text inside an item/1.

Attributes

class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

item_title(assigns)

Renders the primary title text inside an item/1.

Attributes

class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)