Introduction

List groups display a series of content items. They support active/disabled states, actionable links, flush layouts, contextual colors, and badge integration.

Installation

import { ListGroup, ListGroupItem, ListGroupAction } from '@/components/ui/list-group';

Usage

<ListGroup>
<ListGroupItem>An item</ListGroupItem>
<ListGroupItem>A second item</ListGroupItem>
<ListGroupItem>A third item</ListGroupItem>
</ListGroup>

Examples

Default

An item
A second item
A third item
A fourth item
And a fifth one

ListGroupDefault

import { ListGroup, ListGroupItem } from '@/components/ui/list-group';

export default function Component() {
  return (
    <ListGroup className="w-full max-w-sm">
      <ListGroupItem>An item</ListGroupItem>
      <ListGroupItem>A second item</ListGroupItem>
      <ListGroupItem>A third item</ListGroupItem>
    </ListGroup>
  );
}

Active State

An active item
A second item
A third item
A fourth item

ListGroupActive

import { ListGroup, ListGroupItem } from '@/components/ui/list-group';

export default function Component() {
  return (
    <ListGroup className="w-full max-w-sm">
      <ListGroupItem active>An active item</ListGroupItem>
      <ListGroupItem>A second item</ListGroupItem>
    </ListGroup>
  );
}

Disabled

A disabled item
A second item
A third item

ListGroupDisabled

import { ListGroup, ListGroupItem } from '@/components/ui/list-group';

export default function Component() {
  return (
    <ListGroup className="w-full max-w-sm">
      <ListGroupItem disabled>A disabled item</ListGroupItem>
      <ListGroupItem>A second item</ListGroupItem>
    </ListGroup>
  );
}

Actionable Links

Use ListGroupAction for clickable items.

The current link item

A second link item

A third link item

A disabled link item

ListGroupActionable

import { ListGroup, ListGroupAction } from '@/components/ui/list-group';

export default function Component() {
  return (
    <ListGroup className="w-full max-w-sm">
      <ListGroupAction href="#" active>Current link</ListGroupAction>
      <ListGroupAction href="#">A second link</ListGroupAction>
      <ListGroupAction href="#" disabled>Disabled link</ListGroupAction>
    </ListGroup>
  );
}

Flush

Remove borders and rounded corners with the flush prop.

An item
A second item
A third item
A fourth item

ListGroupFlush

import { ListGroup, ListGroupItem } from '@/components/ui/list-group';

export default function Component() {
  return (
    <ListGroup flush className="w-full max-w-sm">
      <ListGroupItem>An item</ListGroupItem>
      <ListGroupItem>A second item</ListGroupItem>
    </ListGroup>
  );
}

Contextual Colors

Default list group item
A primary list group item
A secondary list group item
A success list group item
A danger list group item
A warning list group item

ListGroupContextual

import { ListGroup, ListGroupItem } from '@/components/ui/list-group';

export default function Component() {
  return (
    <ListGroup className="w-full max-w-sm">
      <ListGroupItem>Default</ListGroupItem>
      <ListGroupItem theme="primary">Primary</ListGroupItem>
      <ListGroupItem theme="success">Success</ListGroupItem>
      <ListGroupItem theme="danger">Danger</ListGroupItem>
      <ListGroupItem theme="warning">Warning</ListGroupItem>
    </ListGroup>
  );
}

With Badges

A list item14
A second item2
A third item1

ListGroupWithBadges

import { Badge } from '@/components/ui/badge';
import { ListGroup, ListGroupItem } from '@/components/ui/list-group';

export default function Component() {
  return (
    <ListGroup className="w-full max-w-sm">
      <ListGroupItem className="flex justify-between">A list item<Badge shape="pill">14</Badge></ListGroupItem>
      <ListGroupItem className="flex justify-between">A second item<Badge shape="pill">2</Badge></ListGroupItem>
    </ListGroup>
  );
}

API Reference

ListGroup

Prop	Type	Default	Description
`flush`	`boolean`	`false`	Remove borders and rounded corners
`horizontal`	`boolean`	`false`	Horizontal layout
`numbered`	`boolean`	`false`	Numbered list

ListGroupItem

Prop	Type	Default	Description
`theme`	`default \| primary \| secondary \| success \| danger \| warning`	`default`	Contextual color
`active`	`boolean`	`false`	Active state
`disabled`	`boolean`	`false`	Disabled state
`action`	`boolean`	`false`	Enable hover/active states

ListGroupAction

Same props as ListGroupItem but renders as an <a> element for clickable items.

List Group