layout

TowerPricing

Vertical pricing tier display.

npx chaos add tower-pricing

PREVIEW

$19

$49

USAGE

import { TowerPricing } from '@/components/chaos/layout/tower-pricing';

const tiers = [
  { name: 'Basic', price: 9, features: ['Feature 1', 'Feature 2'] },
  { name: 'Pro', price: 19, features: ['All Basic', 'Feature 3'], featured: true },
  { name: 'Ultra', price: 49, features: ['All Pro', 'Feature 4'] },
];

<TowerPricing tiers={tiers} />

PROPS

PropTypeDefault

tiersPricing tiers {name, price, currency?, period?, features, featured?, featuredLabel?, buttonText?, onSelect?}

PricingTier[]-

variantColor variant

"gold" | "blood" | "cyan" | "bone""gold"

showConnectorsShow connectors between tiers

booleanfalse