Blocks

Pricing Usage Slider

A two-plan pricing section where one card prices itself from a volume slider.

A pricing section built for plans that scale with usage. One card carries a fixed price; the other prices itself from a slider — drag the handle and the figure spins with Number Flow while the track fills behind the handle.

New tab

Flexible pricing for every creator

Start free and scale as you grow. No contracts, no surprises — just work that ships.

Creator

Best for solo creators publishing every week

$79 /mo

Cancel or pause any time

600+ minutes monthly
One custom cloned voice
Commercial usage license

Scale

Pay for the volume your team actually uses

$750 /mo

Billed monthly, adjust any time

Drag to set your monthly volume

Custom SLA and volume
Unlimited cloned voices
SSO, SAML and a dedicated CSM

Installation

pnpm dlx shadcn@latest add @tween-ui/pricing-usage-slider

Usage

app/page.tsx

import PricingUsageSlider from '@/components/tweenui/pricing-usage-slider';
 
export default function Page() {
  return <PricingUsageSlider />;
}

A plan is slider-driven when it carries a range instead of a price:

app/page.tsx

import PricingUsageSlider from '@/components/tweenui/pricing-usage-slider';
 
export default function Page() {
  return (
    <PricingUsageSlider
      title="Flexible pricing for every creator"
      plans={[
        {
          name: 'Creator',
          description: 'Best for solo creators publishing weekly',
          price: 79,
          priceNote: 'Cancel or pause any time',
          popular: true,
          features: ['600+ minutes monthly', 'One cloned voice', 'Commercial license'],
          cta: 'Upgrade now',
          onClick: () => router.push('/signup'),
        },
        {
          name: 'Scale',
          description: 'Pay for the volume your team actually uses',
          range: { min: 399, max: 1200, defaultValue: 750, label: 'Drag to set your volume' },
          features: ['Custom SLA and volume', 'Unlimited cloned voices', 'SSO and SAML'],
          cta: 'Contact sales',
          onClick: () => router.push('/sales'),
        },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
`title`	`ReactNode`	sample heading	Section heading.
`description`	`string`	sample line	Supporting line under the heading.
`plans`	`PricingUsageSliderPlan[]`	two plans	Plans side by side. Two is the shape.
`popularLabel`	`string`	`Most popular`	Badge on the highlighted card.

Extends native <section> attributes (className, style, …).