Card State

Beta

Get Ritla UI

What a Widget card shows while its data loads, when there is nothing yet, or when it fails.

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 card-state
Also works with shadcn: npx shadcn@latest add @ritla/card-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

card-state.tsx

import { CardState } from "@/components/ui/card-state";<CardState state="empty" title="No data yet" description="Your spending shows here after your first payment." action={<Button size="xs">Add money</Button>} />

API reference

CardState

Prop	Type	Default	Description
`state`	`"loading" \| "empty" \| "error"`	None	Figma's State.
`title / description`	`ReactNode`	None	What happened, and what to do.
`action`	`ReactNode`	None	The next step: a Button.
`icon`	`IconComponent`	`ChartBar / WarningCircle`	The icon in the chip.
`loadingLabel`	`ReactNode`	`“Loading…”`	Read while loading.

Accessibility

ARIA

Loading is a busy region (aria-busy) with a hidden label; the skeletons are hidden.
An error is an alert, read as soon as it appears; an empty state is not.

Arabic and RTL notes

Mirrors

The loading title bars sit at the right.

Does not mirror

The centred message and icon.

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