pleate.ui
Data

List

Grouped rows: sections, icon tiles, values, controls, checkmarks, chevrons and swipe actions.
import { List, ListSection, ListItem } from "pleate/list";

Settings screen

Try the switch, the language rows and swiping a trip.

Connectivity

General

Notifications from trips you follow appear on the Lock Screen

Language

Trips

Swipe a trip left, or Tab to its actions

Props

ListSection header / footer / variant

Group.

ReactNode / ReactNode / "inset" | "plain"default "inset"

ListItem title / subtitle / value

Text content.

ReactNode

icon / iconColor / leading

Tile glyph and color, or custom leading content.

ReactNode / CSS color / ReactNode

trailing / selected / chevron

End accessories.

ReactNode / boolean / boolean

href / onClick / asChild

Makes the row interactive.

swipeActions

Revealed by swiping left or by keyboard focus.

{ label, icon?, tone?, onSelect }[]

Accessibility

  • Rows are links or buttons only when interactive.
  • Swipe actions are real buttons: Tab reaches them and reveals the row.