List State

Beta

Get Ritla UI

A list's loading, empty and error states: row skeletons in the real layout, why it is empty, and a reassuring error.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add list-state
Also works with shadcn: npx shadcn@latest add @ritla/list-state
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

list-state.tsx

import { ListState } from "@/components/ui/list-state";<ListState state="error" title="Could not load transactions" description="We could not reach your account. Your money is safe." action={<Button size="xs" variant="outline">Try again</Button>} />

API reference

ListState

Prop	Type	Default	Description
`state`	`"loading" \| "empty" \| "error"`	None	Figma's State.
`title / description / action`	`ReactNode`	None	As in Card state.
`rows`	`number`	`4`	Row skeletons while loading.
`loadingLabel`	`ReactNode`	None	Read while loading.

Accessibility

ARIA

Same as Card state: a busy region while loading, an alert on error.

Arabic and RTL notes

Mirrors

Row skeletons mirror like the rows they stand for: avatar on the right.

Does not mirror

The centred message.

Numerals: No figures of its own.
Arabic typography: label-14 Semibold title, body-12 description.