Phara UI v2.x
Login

List Group

A bordered card that organises a sequence of items, links, or buttons with consistent spacing, dividers, icons, descriptions, badges, and trailing content.

Basic

Plain list items inside a card container. Without href or Livewire directives, items render as non-interactive buttons.

Blade 
<x-ui::list-group>
    <x-ui::list-item>Profile</x-ui::list-item>
    <x-ui::list-item>Billing</x-ui::list-item>
    <x-ui::list-item>Security</x-ui::list-item>
    <x-ui::list-item>Notifications</x-ui::list-item>
</x-ui::list-group>
With Icons

The icon prop adds a leading Heroicon. Icons inherit the variant colour and dim slightly when inactive.

Dashboard Users Billing Settings
Blade 
<x-ui::list-group>
    <x-ui::list-item icon="home"          href="/dashboard" chevron>Dashboard</x-ui::list-item>
    <x-ui::list-item icon="users"         href="/users"     chevron>Users</x-ui::list-item>
    <x-ui::list-item icon="credit-card"   href="/billing"   chevron>Billing</x-ui::list-item>
    <x-ui::list-item icon="cog-6-tooth"   href="/settings"  chevron>Settings</x-ui::list-item>
</x-ui::list-group>
With Description

Pass description to add a secondary line of muted text below the title — ideal for user lists, file lists, or settings items.

Alice Johnson alice@example.com · Admin
Bob Martinez bob@example.com · Editor
Carol White carol@example.com · Viewer
Blade 
<x-ui::list-group>
    <x-ui::list-item
        icon="user-circle"
        description="alice@example.com"
        static
    >
        Alice Johnson
    </x-ui::list-item>
    <x-ui::list-item
        icon="user-circle"
        description="bob@example.com"
        static
    >
        Bob Martinez
    </x-ui::list-item>
</x-ui::list-group>
With Badges

Use the badge and badge-color props for a quick trailing count or label. For custom trailing content, use the append slot instead.

Inbox 12 Drafts 3 Archive Trash
Blade 
<x-ui::list-group>
    <x-ui::list-item icon="inbox"          badge="12"  badge-color="primary" chevron href="#">Inbox</x-ui::list-item>
    <x-ui::list-item icon="paper-airplane" badge="3"   badge-color="red"     chevron href="#">Sent</x-ui::list-item>
    <x-ui::list-item icon="archive-box"                                       chevron href="#">Archive</x-ui::list-item>
    <x-ui::list-item icon="trash"                                              chevron href="#">Trash</x-ui::list-item>
</x-ui::list-group>
Variants

Colour the item text and icon with variant to convey semantic meaning — useful for alert lists, log entries, or status feeds.

Deployment succeeded
Storage at 85%
Payment failed
Update available
Report generated
Blade 
<x-ui::list-group>
    <x-ui::list-item icon="check-circle" variant="success">Deployment succeeded</x-ui::list-item>
    <x-ui::list-item icon="exclamation-triangle" variant="warning">Storage at 85%</x-ui::list-item>
    <x-ui::list-item icon="x-circle" variant="danger">Payment failed</x-ui::list-item>
    <x-ui::list-item icon="information-circle" variant="primary">Update available</x-ui::list-item>
</x-ui::list-group>
States

active highlights the current item with a primary-coloured background. disabled mutes it and blocks all interaction.

Blade 
<x-ui::list-group>
    <x-ui::list-item icon="home"        active>Dashboard (active)</x-ui::list-item>
    <x-ui::list-item icon="users">Users</x-ui::list-item>
    <x-ui::list-item icon="lock-closed" disabled>Locked (disabled)</x-ui::list-item>
</x-ui::list-group>
Flush

Add flush to remove the outer border and border-radius — useful when the list sits inside an existing card or panel.

Account

Profile Password Billing
Blade 
{{-- No outer border or border-radius — useful inside cards --}}
<x-ui::card>
    <x-ui::list-group flush>
        <x-ui::list-item icon="home"        chevron href="#">Dashboard</x-ui::list-item>
        <x-ui::list-item icon="users"       chevron href="#">Users</x-ui::list-item>
        <x-ui::list-item icon="cog-6-tooth" chevron href="#">Settings</x-ui::list-item>
    </x-ui::list-group>
</x-ui::card>
Append Slot

The append slot renders arbitrary content on the right — toggles, buttons, avatars, timestamps, or anything else.

Notifications In-app and email
Marketing emails News and offers
Product updates Version and changelog
Blade 
<x-ui::list-group>
    <x-ui::list-item icon="bell" static>
        Email notifications
        <x-slot:append>
            <x-ui::switch wire:model.live="notifications" />
        </x-slot:append>
    </x-ui::list-item>
</x-ui::list-group>
Livewire

Use wire:click directly on list-item and bind :active to a Livewire property to create a server-driven selected state.

Selected: dashboard

PHP 
// Livewire component
public string $selected = 'dashboard';

public function select(string $item): void
{
    $this->selected = $item;
}

// Template
<x-ui::list-group>
    @foreach(['dashboard','users','billing','settings'] as $item)
        <x-ui::list-item
            :active="$selected === $item"
            wire:click="select('{{ $item }}')"
        >
            {{ ucfirst($item) }}
        </x-ui::list-item>
    @endforeach
</x-ui::list-group>