List

Records read top to bottom — a leading visual, a title and a line, details and actions beside — dense or comfortable, selectable, windowed when long.

Web + MobileBetaData display

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. the native apps: Yasakia (PY4), Yororis (PYO2), Orochia mobile (PS6), Orazaka mobile: every list on FlashList; Orochia web's infinite lists.

When to use

Orazaka's jobs, Orochia's viewers and tippers of a story, a creator's payouts.
A long feed on a phone: sections by day, pull to refresh, swipe actions (React Native).

When not to use

For records with several values to compare side by side.Use instead: Data table
For what happened over time.Use instead: Activity feed
For facts about one thing.Use instead: Description list

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { List } from "@krizaka/ui/list";

Examples

Jobs

Orazaka's jobs, each row opening its run, the status beside it.

Dub “Sunset session” into EnglishDubbing studiorunningnow
Transcribe the interview with ElenaTranscript studiodone14:02
Clip the five best momentsClips studiofailed12:15

Selectable, compact

A story's viewers, picked for a thank-you.

Mina Okafor@mina$12
Alex Moreau@alex$5
Elena Ruiz@elena—

2,000 rows

virtualize: only the rows in view are rendered.

Payout #2000$120.00
Payout #1999$157.00
Payout #1998$194.00
Payout #1997$231.00
Payout #1996$268.00
Payout #1995$305.00
Payout #1994$342.00
Payout #1993$379.00
Payout #1992$416.00
Payout #1991$453.00
Payout #1990$490.00
Payout #1989$527.00

Props

A list of records: dense or comfortable, selectable, actions beside each row, windowed when long, with its states.

Prop	Type	Default	Description
`aria-label`required	`string`	—	The list's accessible name (“Jobs”).
`getId`required	`(item: T) => string`	—	A stable id per record: the React key and the selection's value.
`items`required	`readonly T[]`	—	The records, in order.
`row`required	`(item: T) => ListRow`	—	What a record shows: its title, line, visuals, details, actions and where it leads.
`chevrons`	`boolean`	—	Shows a chevron on the rows that lead somewhere.
`className`	`string`	—	Classes merged on the root.
`defaultSelected`	`readonly string[]`	`[]`	The ids selected at first, uncontrolled.
`density`	`"comfortable" \| "compact"`	—	comfortable (default: 64 px rows with a line) · compact (44 px: dense admin lists).
`empty`	`ReactNode`	—	Shown when there is no record (an `EmptyState`).
`error`	`ReactNode`	—	A failure in place of the rows (an `Alert` with a retry); announced.
`footer`	`ReactNode`	—	Under the list: a `Pagination`, a “Load more” button, a total.
`labels`	`Partial<ListLabels>`	—	The words, passed translated; English by default.
`loading`	`boolean`	—	Loading: `loadingRows` skeleton rows and `aria-busy`.
`loadingRows`	`number`	`5`	How many skeleton rows. Default 5.
`onSelectedChange`	`((selected: string[]) => void)`	—	Called with the new selection.
`selectable`	`boolean`	—	A checkbox per row.
`selected`	`readonly string[]`	—	The ids selected (controlled).
`virtualize`	`{ rowHeight: number; height: number; overscan?: number; }`	—	Renders only the rows in view: fixed `rowHeight`, a scrolling region of `height` px.

Accessibility

A ul named by aria-label; the main action fills the row without nesting the others.
A windowed list is a scrolling region the keyboard can reach.
On React Native, swipe actions are also accessibility actions.

Keyboard

Keys	Action
`Tab`	Moves through the rows' main actions, their checkboxes and their secondary actions.

Best practices

One main action per row (a link or onSelect); secondary actions go in actions, beside it.
Show loading for the first page only; the next pages go in footer (a “Load more” button, a Pagination).
Past a few hundred rows, virtualize with a fixed row height.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub