ns-ui

Compare Table Reach Rule

A tier comparison matrix where every feature row draws a real box-drawing rule that runs left-to-right and terminates with ┤ at the last tier that actually includes it, so the table's staircase of rule lengths is the comparison itself rather than a field of check glyphs.

Use when Pick compare-table-reach-rule when several plans are compared feature by feature and the reader should see how far up the tiers each feature survives without scanning a grid of checkmarks — the rule length per row is the answer. pricing-scale is the better pick when two plans are being weighed against each other rather than a whole matrix enumerated, and feature-grid-ascii-rule when the relationships between features, not their tier reach, are the subject.

Install

npx shadcn add https://design.helpmarq.com/r/compare-table-reach-rule.json
View source and playground

ns-ui / compare-table-reach-rule

Where each feature stops

Every row draws a rule that ends at the last plan that includes it, so the staircase is the comparison.

Feature
Hobby
$0
7/12
Pro
$20/mo
8/12
Team
$60/mo
8/12
Enterprise
Custom
8/12
included
included
included
included

Where your builds are served from

33
1818
3434
34 + private34 + private

Retention window

not included
30 days30 days
1 year1 year
3 years3 years
11
55
2525
UnlimitedUnlimited
not included
included
included
included
not included
not included
included
included

Streamed to a bucket you own

not included
not included
not included
included
not included
not included
not included
included

Enterprise is invoiced instead

included
included
included
not included

Replaced by a named contact on Enterprise

included
included
included
not included
included
included
not included
not included

Free-tier attribution

included
not included
not included
not included

Hover or focus a row to redraw its rule. Click the label to pin it.

Props

PropTypeDefaultDescription
tiers?CompareTier[]DEFAULT_TIERStier columns, cheapest first
rows?CompareFeatureRow[]DEFAULT_ROWSfeature rows, one `support` entry per tier
title?string"Plan comparison"accessible name for the matrix
className?string