List Group

A flexible container for displaying a series of related content as a vertical list.

Default

A ListGroup renders a vertical list of ListGroupItem elements.

An item
A second item
A third item

tsx

import { ListGroup, ListGroupItem } from "@hummingbirdui/react";

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

Active and disabled

The active prop marks the current item and disabled mutes it and blocks interaction.

Active item
Default item
Disabled item

tsx

import { ListGroup, ListGroupItem } from "@hummingbirdui/react";

export default function ListGroupActiveDisabled() {
  return (
    <ListGroup className="max-w-md">
      <ListGroupItem active>Active item</ListGroupItem>
      <ListGroupItem>Default item</ListGroupItem>
      <ListGroupItem disabled>Disabled item</ListGroupItem>
    </ListGroup>
  );
}

Actionable

The action prop styles an item as interactive, and asChild renders it as a link or button.

First action Active action Third action

tsx

import { ListGroup, ListGroupItem } from "@hummingbirdui/react";

export default function ListGroupAction() {
  return (
    <ListGroup asChild className="max-w-md">
      <div>
        <ListGroupItem action asChild>
          <a href="#list-group">First action</a>
        </ListGroupItem>
        <ListGroupItem action active asChild>
          <a href="#list-group">Active action</a>
        </ListGroupItem>
        <ListGroupItem action asChild>
          <a href="#list-group">Third action</a>
        </ListGroupItem>
      </div>
    </ListGroup>
  );
}

Numbered

The numbered prop prefixes each item with an incrementing counter.

First item
Second item
Third item

tsx

import { ListGroup, ListGroupItem } from "@hummingbirdui/react";

export default function ListGroupNumbered() {
  return (
    <ListGroup numbered className="max-w-md">
      <ListGroupItem>First item</ListGroupItem>
      <ListGroupItem>Second item</ListGroupItem>
      <ListGroupItem>Third item</ListGroupItem>
    </ListGroup>
  );
}

Pinned

The pinned prop keeps an item stuck to the top while the list scrolls.

Pinned heading
An item
A second item
A third item
A fourth item
A fifth item
A sixth item

tsx

import { ListGroup, ListGroupItem } from "@hummingbirdui/react";

export default function ListGroupPinned() {
  return (
    <ListGroup className="max-h-40 max-w-md overflow-y-auto py-0">
      <ListGroupItem pinned>Pinned heading</ListGroupItem>
      <ListGroupItem>An item</ListGroupItem>
      <ListGroupItem>A second item</ListGroupItem>
      <ListGroupItem>A third item</ListGroupItem>
      <ListGroupItem>A fourth item</ListGroupItem>
      <ListGroupItem>A fifth item</ListGroupItem>
      <ListGroupItem>A sixth item</ListGroupItem>
    </ListGroup>
  );
}

Custom content

ListText provides title and subtitle text for composing richer item layouts.

List group item heading
3 days ago
Some supporting, secondary copy for this list item.
Another heading
1 week ago
More supporting text.

tsx

import { ListGroup, ListGroupItem, ListText } from "@hummingbirdui/react";

export default function ListGroupCustomContent() {
  return (
    <ListGroup className="max-w-md">
      <ListGroupItem>
        <div className="flex w-full items-center justify-between">
          <ListText>List group item heading</ListText>
          <small className="text-muted">3 days ago</small>
        </div>
        <ListText variant="secondary">
          Some supporting, secondary copy for this list item.
        </ListText>
      </ListGroupItem>
      <ListGroupItem>
        <div className="flex w-full items-center justify-between">
          <ListText>Another heading</ListText>
          <small className="text-muted">1 week ago</small>
        </div>
        <ListText variant="secondary">More supporting text.</ListText>
      </ListGroupItem>
    </ListGroup>
  );
}

API Reference

ListGroup

Prop	Type	Default	Description
numbered	`boolean`	`false`	Prefix each item with an incrementing counter.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

ListGroupItem

Prop	Type	Default	Description
action	`boolean`	`false`	Style the item as interactive with hover and focus states.
pinned	`boolean`	`false`	Stick the item to the top of a scrolling list.
active	`boolean`	`false`	Mark the item as the active, current one.
disabled	`boolean`	`false`	Mute the item and disable interaction.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

ListText

Prop	Type	Default	Description
variant	`"primary" \| "secondary"`	`"primary"`	Render as a title or a muted subtitle.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

Styling

Hummingbird React list group is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available list group classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousDropdown Menu NextNav