# Plan Fit Pricing > A pricing section for an AI dubbing tool, priced by the minutes you dub. Drag the usage slider and four plan cards measure it against their allowances: past one, its overage shows as a hatched stretch and its price climbs, until the highlight glides to the plan that costs less. Monthly and yearly billing count every price over, and a volume card beside "In every plan" lights up at the slider's far end. A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/plan-fit-pricing). - Page, with a live preview: https://shadcn.exchange/r/keyframeui/plan-fit-pricing - Screenshot: https://shadcn.exchange/shot/keyframeui/plan-fit-pricing/light.png - Registry item: https://keyframeui.com/r/plan-fit-pricing.json - Categories: blocks, pricing-sections - Listed: 2026-11-02, source last changed 2026-11-02 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/keyframeui/plan-fit-pricing.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - Registry items: `https://keyframeui.com/r/plan-fit.json` ## Notes from the registry Live preview and the components it's built with: https://keyframeui.com/blocks/pricing-sections/plan-fit-pricing ## Files ### `registry/blocks/plan-fit-pricing.tsx` ```tsx "use client"; import * as React from "react"; import { PlanFit, type PlanFitBilling, type PlanFitPlan } from "@/components/ui/plan-fit"; /* ── Content ───────────────────────────────────────────────── * Everything you'd change to make the section yours: the copy, * the plans and their allowances, what every plan includes and * the volume card. The slider picks the plan that costs least * for the minutes a visitor dubs; drag it to the far end and * the volume card lights up. * ─────────────────────────────────────────────────────────── */ /** The one accent: the slider, the best plan's highlight and button, and the headline's last words. */ const ACCENT = { light: "#ff4a17", dark: "#ff6a3d" }; const EYEBROW = "Pricing"; const HEADLINE = { before: "Pay for the minutes", accent: "you dub." }; const SUBLINE = "Every plan speaks 32 languages in your own voice. Drag to how much video you publish a month and the plan that costs least lights up."; const UNIT = "minutes"; const READOUT = "minutes of video dubbed per month"; const START = 90; const MAX = 6000; const BILLING: PlanFitBilling[] = [ { id: "monthly", label: "Monthly" }, { id: "yearly", label: "Yearly", note: "Save 20%" }, ]; const PLANS: PlanFitPlan[] = [ { id: "free", name: "Free", pitch: "Hear yourself in another language.", price: 0, included: 10, caption: "No card needed", features: ["3 languages", "720p export", "Mynah watermark"], cta: { label: "Start free", href: "#signup" }, }, { id: "creator", name: "Creator", pitch: "For a channel that publishes every week.", price: { monthly: 24, yearly: 19 }, included: 120, overage: { price: 8, per: 30 }, caption: { monthly: "Billed monthly", yearly: "Billed $228 a year" }, features: ["32 languages", "1 cloned voice", "1080p, no watermark"], cta: { label: "Start dubbing", href: "#creator" }, }, { id: "studio", name: "Studio", pitch: "For teams localizing a whole catalog.", price: { monthly: 99, yearly: 79 }, included: 600, overage: { price: 30, per: 150 }, caption: { monthly: "Billed monthly", yearly: "Billed $948 a year" }, features: ["5 cloned voices", "Lip sync", "Review links for translators"], cta: { label: "Choose Studio", href: "#studio" }, }, { id: "network", name: "Network", pitch: "For publishers releasing daily, everywhere.", price: { monthly: 399, yearly: 319 }, included: 3000, overage: { price: 120, per: 750 }, caption: { monthly: "Billed monthly", yearly: "Billed $3,828 a year" }, features: ["Unlimited voices", "API and webhooks", "Priority render queue"], cta: { label: "Choose Network", href: "#network" }, }, ]; const INCLUDED = { title: "In every plan", items: [ { title: "Your voice, cloned", body: "From a minute of clean audio." }, { title: "Lip-matched edits", body: "Fix a line and only that line re-renders." }, { title: "Music and effects kept", body: "Only the speech is replaced." }, { title: "Subtitles included", body: "SRT and VTT for every language." }, ], }; /** The card beside "In every plan". It lights up when the slider reaches `from` minutes. */ const VOLUME = { from: MAX, title: "Over 6,000 minutes a month?", body: "Volume pricing, custom voice models trained on your talent, a dedicated render queue and SSO.", cta: { label: "Talk to sales", href: "#sales" }, link: { label: "Read the security brief", href: "#security" }, }; /* ── Section ─────────────────────────────────────────────── */ export function PlanFitPricing() { const [volume, setVolume] = React.useState(false); return (

{EYEBROW}

{HEADLINE.before} {HEADLINE.accent}

{SUBLINE}

setVolume(usage >= VOLUME.from)} className="mt-12 [--plan-fit-accent:var(--accent)] [--plan-fit-surface:#ffffff] dark:[--plan-fit-surface:#0f0f12]" />

{INCLUDED.title}

    {INCLUDED.items.map((item) => (
  • {item.title} {item.body}
    • ))}
{/* Volume: a night card in both schemes. Its ring takes the accent once the slider reaches the far end. */}

{VOLUME.title}

{VOLUME.body}

); } ```