List Group

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

Default

A ListGroup renders a vertical list of ListGroup.Item elements.

An item
A second item
A third item

tsx

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

export default function ListGroupDefault() {
  return (
    <ListGroup className="max-w-md">
      <ListGroup.Item>An item</ListGroup.Item>
      <ListGroup.Item>A second item</ListGroup.Item>
      <ListGroup.Item>A third item</ListGroup.Item>
    </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 } from "@hummingbirdui/react";

export default function ListGroupActiveDisabled() {
  return (
    <ListGroup className="max-w-md">
      <ListGroup.Item active>Active item</ListGroup.Item>
      <ListGroup.Item>Default item</ListGroup.Item>
      <ListGroup.Item disabled>Disabled item</ListGroup.Item>
    </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 } from "@hummingbirdui/react";

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

Numbered

The numbered prop prefixes each item with an incrementing counter.

First item
Second item
Third item

tsx

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

export default function ListGroupNumbered() {
  return (
    <ListGroup numbered className="max-w-md">
      <ListGroup.Item>First item</ListGroup.Item>
      <ListGroup.Item>Second item</ListGroup.Item>
      <ListGroup.Item>Third item</ListGroup.Item>
    </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 } from "@hummingbirdui/react";

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

Custom content

ListGroup.Text 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 } from "@hummingbirdui/react";

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

API Reference

ListGroup

Prop	Type	Default
`numbered`	`boolean`	`false`
`asChild`	`boolean`	`false`
`className`	`string`	—

ListGroup.Item

Prop	Type	Default
`action`	`boolean`	`false`
`pinned`	`boolean`	`false`
`active`	`boolean`	`false`
`disabled`	`boolean`	`false`
`asChild`	`boolean`	`false`
`className`	`string`	—

ListGroup.Text

Prop	Type	Default
`variant`	`"primary" \| "secondary"`	`"primary"`
`className`	`string`	—

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 NextLoader