Data Display

List Group

A bordered, divided list of items, links, or buttons inside a single element. Use render to turn rows into router links or buttons; interactive rows get hover and focus affordances automatically.

Sourcesrc/components/ui/list-group.tsx

Static items

Profile

Settings

Messages

Billing (coming soon)

Import

import {
  ListGroup,
  ListGroupItem,
} from "@mikenotthepope/substrateui"

Composition

ListGroup
└── ListGroupItem

Interactive rows

Pass render to render each row as a button or link. With a LinkProvider in place, render={<Link href="…" />} routes through your framework's client-side navigation.

Payment methods

API Reference

Prop	Type	Default	Description
`ListGroup`	`React.ComponentProps<'div'>`	—	The bordered, divided container.
`ListGroupItem.active`	`boolean`	—	Marks the row as the current selection.
`ListGroupItem.disabled`	`boolean`	—	Dims the row and blocks interaction.
`ListGroupItem.render`	`React.ReactElement`	—	Render as a link or button, e.g. render={<Link href="…" />} or render={<button />}.