Tier Ladder

"use client"

import { Button } from "@/components/ui/button"

The TierLadder component lays out levels in order, lowest first: verification tiers, referral levels or plans. Each level shows a number or a check, a name, one line of detail and an optional tag, and can hold its limits, perks, progress and an action. Use it when the order of the levels matters and the user needs to see where they are. For one limit on its own, use UsageMeter; for a pick between plans, use a choice tile group.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @dots/tier-ladder
Copy

Usage#

Copyimport {
  TierLadder,
  TierLadderItem,
  TierLadderLimit,
  TierLadderLimits,
} from "@/components/ui/tier-ladder"

Copy<TierLadder aria-label="Verification levels">
  <TierLadderItem status="done" name="Basic" description="Phone number" />
  <TierLadderItem
    status="current"
    name="Verified"
    description="ID card and selfie"
    badge="Current"
  >
    <TierLadderLimits>
      <TierLadderLimit label="Spend a month" value="$10,000" />
      <TierLadderLimit label="Send a day" value="$2,500" />
    </TierLadderLimits>
  </TierLadderItem>
  <TierLadderItem name="Extended" description="Proof of income" />
</TierLadder>

Composition#

Use the following composition to build a tier ladder:

CopyTierLadder
└── TierLadderItem
    ├── TierLadderProgress
    ├── TierLadderLimits
    │   └── TierLadderLimit
    ├── TierLadderPerks
    │   └── TierLadderPerk
    └── any action, such as a Button

Features#

• Three statuses: done shows a check, current marks the user's level, upcoming shows the level number
• A tag at the end of each header, filled on the current level
• Limits as a grid of label and value tiles, perks as a short list
• TierLadderProgress for steps or referrals toward a level, without the warning color of a spending limit
• A level with no children stays a single collapsed row
• Customizable styling through the className prop on every part

Perks and progress#

Use TierLadderPerks for what a level adds, and TierLadderProgress for how far the user is from it.

"use client"

import {

In review#

When the next level is waiting on a check, keep it upcoming, tag it with badge, and set statusLabel so screen readers hear the same thing.

"use client"

import {

Level numbers#

The marker shows the position in the list by default. Pass level when the list starts mid-ladder, for example plans from the user's current one up.

"use client"

import {

Accessibility#

TierLadder renders an ordered list and each TierLadderItem a list item, so the order and count of levels are announced.

Name the ladder#

The list has no visible title of its own. Give TierLadder an aria-label, or point aria-labelledby at a nearby heading.

Copy<TierLadder aria-label="Verification levels">{/* ... */}</TierLadder>

Status#

The marker is hidden from assistive tech. The level name is a heading that ends with its status for screen readers only: "Completed", "Current level" or "Not reached". The current level also gets aria-current="step". When badge says something else, such as "In review", pass the same text as statusLabel.

Headings#

Each level name is an h3 by default. Set headingLevel so it fits the page outline.

Progress#

TierLadderProgress is a meter. Screen readers hear its value from value and max, such as "8 of 20", never from valueText. Pass a valueLabel to add what the numbers lack, such as "8 of 20 invites" or "1 of 3 steps done".

API Reference#

TierLadder#

The ordered list of levels. Accepts all props of <ol>.

TierLadderItem#

One level. Accepts all props of <li> except title.

TierLadderLimits#

A grid of key figures for a level. Accepts all props of <dl>.

TierLadderLimit#

One figure. Accepts all props of <div> except children.

TierLadderPerks#

A list of what a level adds. Accepts all props of <ul>.

TierLadderPerk#

One perk. Accepts all props of <li>.

TierLadderProgress#

Progress toward a level. Renders a UsageMeter and accepts all of its props, with different defaults.