Skip to content

Tier ladder

Five-tier comparison table with grouped rows.

Usage

Usage
import { TierLadder } from '@/components/blocks/comparison-02'


<TierLadder />


// Your own tiers and groups. true is Included, false is Not included, null is Not available.
<TierLadder
  heading="Plans that grow with you"
  tiers={[
    { name: 'Free' },
    { name: 'Pro', recommended: true },
    { name: 'Team' },
  ]}
  groups={[
    {
      label: 'Basics',
      rows: [
        { label: 'Projects', icon: 'cloud', values: ['3', '50', 'Unlimited'] },
        { label: 'Version history', icon: 'history', tooltip: 'How far back you can restore.', values: [null, true, true] },
      ],
    },
  ]}
  highlightRow="Version history"
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/comparison-02

Source

Props

Tier ladder props
PropTypeDefaultDescription
eyebrowstring= 'Compare plans'Small label above the heading.
headingstring= 'Room for every photo your family takes'Section heading.
descriptionstring= Sepiary plans blurbMuted paragraph under the heading.
brandstring= 'Sepiary'Wordmark in the top-left corner of the table, also used in the caption.
tiers{ name: string; recommended?: boolean }[]= Pocket, Shoebox, Attic, Archive and HeirloomPlan columns, headed by name. The recommended tier gets a faint blue column tint, a small label and the lift-in entrance.
groups{ label: string; rows: { label: string; icon?: 'cloud' | 'photo' | 'video' | 'history' | 'family' | 'share' | 'link' | 'lock' | 'id' | 'support'; tooltip?: string; values: (string | boolean | null)[] }[] }[]= Three groups of Sepiary featuresFeature groups with one value per tier. true shows a blue check, false a muted cross, null a dash, and strings show as text.
highlightRowstring= 'Undo deleted files'Label of the row tinted as a soft blue band across every column.
classNamestring= —Additional classes for the section.
styleCSSProperties= —Inline styles, handy for overriding the --pp-* color variables.