{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "pricing-usage-slider",
"type": "registry:block",
"title": "Pricing Usage Slider",
"description": "A two-plan pricing section where the second card prices itself from a volume slider, the figure spinning with Number Flow as you drag while the track fills behind the handle.",
"dependencies": [
"@number-flow/react"
],
"registryDependencies": [
"https://tween-ui.vercel.app/r/slide-arrow-button.json"
],
"cssVars": {
"theme": {}
},
"files": [
{
"path": "components/tweenui/pricing-usage-slider.tsx",
"type": "registry:component",
"target": "components/tweenui/pricing-usage-slider.tsx",
"content": "'use client';\n\nimport { useId, useState, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport NumberFlow from '@number-flow/react';\nimport { cn } from '@/lib/utils';\nimport SlideArrowButton from './slide-arrow-button';\n\nfunction BoltIcon({ className }: { className?: string }) {\n return (\n \n );\n}\n\nfunction CheckIcon({ className }: { className?: string }) {\n return (\n \n );\n}\n\nexport interface PricingUsageSliderRange {\n /** Cheapest price on the track. */\n min: number;\n /** Most expensive price on the track. */\n max: number;\n /** Where the handle starts. */\n defaultValue: number;\n /** Caption under the slider, e.g. \"minutes per month\". */\n label?: string;\n}\n\nexport interface PricingUsageSliderPlan {\n /** Plan name. */\n name: string;\n /** One line under the name. */\n description: string;\n /** Fixed monthly price. Omit it and pass `range` for a slider-driven plan. */\n price?: number;\n /** Small print under the price. */\n priceNote?: string;\n /** What the plan includes. */\n features: string[];\n /** Button label. */\n cta: string;\n /** Runs when the plan's button is pressed. */\n onClick?: () => void;\n /** Highlights the card and adds the badge. */\n popular?: boolean;\n /** Turns the price into a slider the visitor scrubs. */\n range?: PricingUsageSliderRange;\n}\n\nexport interface PricingUsageSliderProps extends Omit<\n ComponentPropsWithoutRef<'section'>,\n 'title'\n> {\n /** Section heading. */\n title?: ReactNode;\n /** Supporting line under the heading. */\n description?: string;\n /** Plans shown side by side. Two is the intended shape. */\n plans?: PricingUsageSliderPlan[];\n /** Badge on the popular card. */\n popularLabel?: string;\n}\n\nconst DEFAULT_TITLE = 'Flexible pricing for every creator';\n\nconst DEFAULT_DESCRIPTION =\n 'Start free and scale as you grow. No contracts, no surprises — just work that ships.';\n\nconst DEFAULT_PLANS: PricingUsageSliderPlan[] = [\n {\n name: 'Creator',\n description: 'Best for solo creators publishing every week',\n price: 79,\n priceNote: 'Cancel or pause any time',\n popular: true,\n features: ['600+ minutes monthly', 'One custom cloned voice', 'Commercial usage license'],\n cta: 'Upgrade now',\n },\n {\n name: 'Scale',\n description: 'Pay for the volume your team actually uses',\n priceNote: 'Billed monthly, adjust any time',\n range: { min: 399, max: 1200, defaultValue: 750, label: 'Drag to set your monthly volume' },\n features: ['Custom SLA and volume', 'Unlimited cloned voices', 'SSO, SAML and a dedicated CSM'],\n cta: 'Contact sales',\n },\n];\n\nfunction PlanCard({ plan, popularLabel }: { plan: PricingUsageSliderPlan; popularLabel: string }) {\n const sliderId = useId();\n const [value, setValue] = useState(plan.range?.defaultValue ?? 0);\n\n const range = plan.range;\n const fill = range\n ? Math.max(0, Math.min(100, ((value - range.min) / (range.max - range.min || 1)) * 100))\n : 0;\n\n return (\n \n