Availability List

import {
  AvailabilityItem,
  AvailabilityList,

The AvailabilityList component tells the user what they can still do right now: during maintenance, under an account restriction, while a card is frozen or after a lockout. Each row names a feature, says what it means at the moment and shows its state as a word plus an icon. Use it when the answer is a state per feature. For label and value details such as fees or terms, use KeyValue. For the steps of a process over time, use StatusTimeline.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @dots/availability-list
Copy

Usage#

Copyimport {
  AvailabilityItem,
  AvailabilityList,
} from "@/components/ui/availability-list"

Copy<AvailabilityList label="During maintenance">
  <AvailabilityItem
    title="Card payments"
    description="Online and in stores"
    status="works"
  />
  <AvailabilityItem
    title="Transfers"
    description="Sent after 04:30"
    status="queued"
  />
</AvailabilityList>

Composition#

Use the following composition to build an availability list:

CopyAvailabilityList
└── AvailabilityItem

Features#

• Three states: works, queued and paused, each shown as a word plus an icon, never color alone
• An optional heading that also names the list, with a configurable heading level
• An optional round icon tile per row
• Custom status words through statusLabel, such as "Delayed" or "Off", while the icon stays
• No background of its own, so it sits in a card or sheet

Without icons#

Leave out icon for a compact list. Put working features first, then queued, then paused.

import {
  AvailabilityItem,
  AvailabilityList,

Custom status words#

Use statusLabel to replace the status word when "Queued" or "Paused" does not fit. Without a label, pass aria-label to name the list.

import {
  AvailabilityItem,
  AvailabilityList,

Accessibility#

AvailabilityList renders a real list (<ul role="list">) of <li> rows.

Name the list#

With label, the heading names the list through aria-labelledby. Set headingLevel so the heading fits the page outline. Without label, pass aria-label or aria-labelledby.

Copy<AvailabilityList aria-label="Services right now">
  {/* items */}
</AvailabilityList>

State in words#

Each row reads as the title and the description, followed by the status word. The status icon and the row icon are hidden from assistive tech, so the status word must carry the meaning. Keep statusLabel short and clear.

API Reference#

AvailabilityList#

The list and its optional heading. Accepts all <div> props except title.

AvailabilityItem#

One feature and its state. Accepts all <li> props except title and children.