ns-ui
Pricing section rendered as a literal balance scale: two tier cards hang as pans from a canvas beam, billing toggle and feature checkmarks add weight, and beam-torque spring physics settles with one inertial overshoot to show which tier objectively outweighs the other.
Use when a two-tier pricing section where the comparison should be settled physically, the billing toggle and each feature adding real weight until the beam tips toward whichever tier outweighs the other; pick picker-pareto-frontier instead when the options carry numeric axes and dominance should be computed rather than felt, or grid-bento-dense when the section is an overview grid rather than a two-way comparison.
Install
npx shadcn add https://design.helpmarq.comns-ui / pricing-scale
Two plans on a real balance beam. Flip the billing period, tick features on and off, and watch which side the physics comes down on.
For weekend projects
billed monthly
For teams with deadlines
billed monthly
Prices in USD, taxes not included. The beam has no sales quota.
| Prop | Type | Default | Description |
|---|---|---|---|
| left? | CounterpoiseTier | STARTER | tier hung from the left pan |
| right? | CounterpoiseTier | PRO | tier hung from the right pan |
| annualMultiplier? | number | 0.8 | annual billing price multiplier (0.8 = 20% off) |
| className? | string | — | — |