ListGroup

A styled list container with optional icons, active states, and suffix content.

ExamplesCodeUsageChangelog

Basic usage

Profile

Account settings

Notifications

Privacy

Tailwind v4

<ListGroup>
  <ListGroupItem>Profile</ListGroupItem>
  <ListGroupItem>Account settings</ListGroupItem>
  <ListGroupItem>Notifications</ListGroupItem>
  <ListGroupItem>Privacy</ListGroupItem>
</ListGroup>

With links

Pass href to make items render as <a> tags.

DashboardProjectsTeamBilling (disabled)

Tailwind v4

<ListGroup>
  <ListGroupItem href="#">Dashboard</ListGroupItem>
  <ListGroupItem href="#">Projects</ListGroupItem>
  <ListGroupItem href="#">Team</ListGroupItem>
  <ListGroupItem href="#" disabled>Billing (disabled)</ListGroupItem>
</ListGroup>

With active item

Use active to highlight the currently selected item.

InboxSentDraftsArchive

Tailwind v4

<ListGroup>
  <ListGroupItem href="#">Inbox</ListGroupItem>
  <ListGroupItem href="#" active>Sent</ListGroupItem>
  <ListGroupItem href="#">Drafts</ListGroupItem>
  <ListGroupItem href="#">Archive</ListGroupItem>
</ListGroup>

With icons

Use the #icon slot to add a leading icon to any item.

Home Profile Settings

Tailwind v4

<ListGroup>
  <ListGroupItem href="#">
    <template #icon><!-- home icon svg --></template>
    Home
  </ListGroupItem>
  <ListGroupItem href="#">
    <template #icon><!-- user icon svg --></template>
    Profile
  </ListGroupItem>
  <ListGroupItem href="#">
    <template #icon><!-- settings icon svg --></template>
    Settings
  </ListGroupItem>
</ListGroup>

With suffix badges

Use the #suffix slot to add a trailing element such as a count badge.

Inbox 12

Spam 3

Archive 142

Tailwind v4

<ListGroup>
  <ListGroupItem>
    Inbox
    <template #suffix><Badge variant="primary">12</Badge></template>
  </ListGroupItem>
  <ListGroupItem>
    Spam
    <template #suffix><Badge variant="danger">3</Badge></template>
  </ListGroupItem>
  <ListGroupItem>
    Archive
    <template #suffix><Badge>142</Badge></template>
  </ListGroupItem>
</ListGroup>

Flush variant

Use flush to remove the outer border radius — useful when nesting inside a Card or Panel.

Navigation

OverviewAnalyticsReports

Tailwind v4

<ListGroup flush>
  <ListGroupItem href="#">Overview</ListGroupItem>
  <ListGroupItem href="#" active>Analytics</ListGroupItem>
  <ListGroupItem href="#">Reports</ListGroupItem>
</ListGroup>

ListGroup Props

Prop	Type	Default	Description
flush	boolean	false	Remove outer border-radius for edge-to-edge use

ListGroupItem Props

Prop	Type	Default	Description
href	string	undefined	Renders as <a> when provided
active	boolean	false	Highlights item as currently selected
disabled	boolean	false	Dims and disables interaction

Slots

ListGroupItem

Slot	Description
icon	Leading icon or visual
default	Main label or content
suffix	Trailing element (badge, count, chevron, etc.)