GliaKit
Get GliaKit

Data display

List

Tappable rows in a bordered surface, each with an optional leading icon, a subtitle and a trailing chevron.

Source
src/components/ui/list.tsx
Figma
ListItem · variant (simple, icon, group).

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx
import { List, ListItem } from "@/components/ui/list";

When to use

  • Settings menus and navigation lists where each row opens something.
  • Short collections with a title and one line of detail per row.
  • When rows need several comparable fields, sorting or selection, use Table.
  • For static, non-interactive text, use a plain ul; every ListItem is a button.

Examples

Simple

Title only, for short navigation lists.

Grouped

The Figma group variant: a mono eyebrow heading above each List.

Without chevron

Set chevron={false} for rows that act in place. Each row is a button, so onClick just works.

API reference

List

Bordered, rounded container with dividers between rows. Extends native div attributes.

ListItem

Always renders a <button type="button">. Extends native button attributes (onClick, disabled, aria-*).

PropTypeDefaultDescription
titlestring-Required. Main text, truncated to one line. Not passed to the native title attribute.
subtitlestring-Secondary line in muted text, truncated to one line.
iconReact.ReactNode-Leading element, shown in a 36px muted rounded square.
chevronbooleantrueShows the trailing chevron. Set false for rows that act in place instead of opening something.

Accessibility

  • Each row is a native button: in the tab order, activated with Enter or Space.
  • The chevron and leading icon are decorative; the title and subtitle make up the button's accessible name.
  • ListItem cannot render as a link. For navigation, call router.push in onClick, or build the row as a Link with the same classes so it is announced as a link.
  • Group headings in the grouped pattern are plain text; use a real heading element if the groups structure the page.

Related

CardTableAvatar