Recipe

Review queue

A dense review queue with filters, metrics, progress, and row-level summaries.

Preview

Queued18

Ready7

Blocked3

Merchant review

Rate table changed by 4.2%.

Ready

Contract sync

Missing approver from finance.

Blocked

Invoice audit

Three invoices need category cleanup.

Draft

Ingredients

The recipe only uses documented Axie primitives.

StatSegmented ControlProgressList RowBadge

Accessibility

Use one heading for the queue and keep row labels descriptive enough to stand alone.
Avoid color-only status. Pair progress, badges, and text so state survives low-vision and monochrome contexts.
Keep row actions as buttons or links with clear accessible names.

Code

code

<div className="grid gap-4">  <div className="grid gap-3 border-y border-axie-line py-4 sm:grid-cols-3">    <Stat label="Queued" value="18" />    <Stat label="Ready" value="7" tone="accent" />    <Stat label="Blocked" value="3" tone="danger" />  </div>  <SegmentedControl ariaLabel="Queue filter" options={filters} value="ready" />  <div className="divide-y divide-axie-line border-y border-axie-line">    <ListRow title="Merchant review" meta="Ready" description="Rate table changed by 4.2%." />    <ListRow title="Contract sync" meta="Blocked" description="Missing approver from finance." />  </div></div>