# Plan Fit CTA > A closing call to action on a night band. Beside the headline, a plan picker on its own card: drag to how much video you publish and the cards swipe to the plan that fits, and the main button changes to name it. 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-cta). - Page, with a live preview: https://shadcn.exchange/r/keyframeui/plan-fit-cta - Screenshot: https://shadcn.exchange/shot/keyframeui/plan-fit-cta/light.png - Registry item: https://keyframeui.com/r/plan-fit-cta.json - Categories: blocks, cta-sections - Listed: 2026-11-02, source last changed 2026-11-02 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/keyframeui/plan-fit-cta.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/cta-sections/plan-fit-cta ## Files ### `registry/blocks/plan-fit-cta.tsx` ```tsx "use client"; import * as React from "react"; import { PlanFit, type PlanFitPlan } from "@/components/ui/plan-fit"; /* ── Content ───────────────────────────────────────────────── * Everything you'd change to make the section yours: the copy, * the plans and the button. The section is a night band in both * schemes; the plan picker sits on its own card beside the copy, * and the main button always names the plan that fits. * ─────────────────────────────────────────────────────────── */ /** The one accent: the slider, the best plan's highlight and the headline's last word. */ const ACCENT = "#ff5a26"; const HEADLINE = { before: "Your first ten minutes are", accent: "on us." }; const BODY = "Upload a video, pick a language and hear yourself speak it before you choose a plan. Move to a bigger one the month you outgrow it."; const POINTS = ["No card to start", "Cancel in two clicks", "Keep every dub you made"]; const CTA = { label: (plan: string) => `Start with ${plan}`, href: "#signup" }; const SECONDARY = { label: "Watch a 2-minute demo", href: "#demo" }; const PICKER = { title: "How much do you publish?", unit: "minutes", readout: "minutes of video a month", start: 240 }; const PLANS: PlanFitPlan[] = [ { id: "creator", name: "Creator", pitch: "For a channel that publishes every week.", price: 24, included: 120, overage: { price: 8, per: 30 }, caption: "Billed monthly", features: ["32 languages", "1 cloned voice"], }, { id: "studio", name: "Studio", pitch: "For teams localizing a whole catalog.", price: 99, included: 600, overage: { price: 30, per: 150 }, caption: "Billed monthly", features: ["5 cloned voices", "Lip sync"], }, { id: "network", name: "Network", pitch: "For publishers releasing daily.", price: 399, included: 3000, caption: "Billed monthly", features: ["Unlimited voices", "API and webhooks"], }, ]; /* ── Section ─────────────────────────────────────────────── */ export function PlanFitCta() { // PlanFit reports the plan that fits on mount and whenever it changes. const [plan, setPlan] = React.useState(PLANS[0].id); const name = PLANS.find((p) => p.id === plan)?.name ?? PLANS[0].name; return (

{HEADLINE.before} {HEADLINE.accent}

{BODY}

{point}

{CTA.label(name)} {SECONDARY.label}

{/* The picker on its own card: white in light mode, raised night in dark. */}

{PICKER.title}

); } ```