Item

Home Item

The Item component is a flexible layout primitive designed to organize content such as titles, descriptions, media, and actions in a consistent way. It simplifies common UI patterns by providing a reusable structure for list items and grouped content, reducing the need for repetitive layout code while keeping interfaces clean and scalable.


<?php

use Lib\PHPXUI\{
    Item,
    ItemContent,
    ItemTitle,
    ItemDescription,
    ItemActions,
    ItemMedia,
    Button
};

?>

<div class="flex w-full max-w-md flex-col gap-6">
    <Item variant="outline">
        <ItemContent>
            <ItemTitle>Basic Item</ItemTitle>
            <ItemDescription>
                A simple item with title and description.
            </ItemDescription>
        </ItemContent>
        <ItemActions>
            <Button variant="outline" size="sm">
                Action
            </Button>
        </ItemActions>
    </Item>
    <Item variant="outline" size="sm" asChild="true">
        <a href="#">
            <ItemMedia>
                <BadgeCheck class="size-5" />
            </ItemMedia>
            <ItemContent>
                <ItemTitle>Your profile has been verified.</ItemTitle>
            </ItemContent>
            <ItemActions>
                <ChevronRight class="size-4" />
            </ItemActions>
        </a>
    </Item>
</div>

Installation

npm

npx phpxui add Item

Usage

use Lib\PHPXUI\{
    Item,
    ItemActions,
    ItemContent,
    ItemDescription,
    ItemFooter,
    ItemHeader,
    ItemMedia,
    ItemTitle
}

<Item>
    <ItemHeader>Item Header</ItemHeader>
    <ItemMedia />
    <ItemContent>
        <ItemTitle>Item</ItemTitle>
        <ItemDescription>Item</ItemDescription>
    </ItemContent>
    <ItemActions />
    <ItemFooter>Item Footer</ItemFooter>
</Item>

Examples

Link

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.

Size

Basic Item

A simple item with title and description.

Your profile has been verified.

Icon

Security Alert

New login detected from unknown device.

Avatar

Evil Rabbit

Last seen 5 months ago

No Team Members

Invite your team to collaborate on this project.

Variants

Default Variant

Standard styling with subtle background and borders.

Outline Variant

Outlined style with clear borders and transparent background.

Muted Variant

Subdued appearance with muted colors for secondary content.

Image

Group

Falta

Item const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add Item'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };