Tween UITween UI
7

Blocks

Pricing Plan Switch

A pricing section that morphs the plan badge, crossfades the copy, and spins the price on switch.

A ready-made pricing block. Picking a plan on the left morphs the plan badge (crossfade + width-morph), crossfades the description, and spins the price with Number Flow, while the feature checklist lights up its included rows. A monthly/yearly toggle re-spins the price. Driven by GSAP.

New tab
Pricing

Simple pricing that scales with you

Upgrade anytime as your needs evolve, and stay focused on building and expanding your product with confidence.

Free trialCancel anytime
StarterProBusiness

Subscription

$2,500/month

Everything you need to get moving — core automation, a shared workspace, and email support to keep momentum.

Built for growing teams with advanced automation, priority workflows, and deeper analytics to keep everything moving.

Enterprise-grade controls with custom workflows, team-wide governance, and dedicated support for large-scale operations.

Get started

What's included:

  • Unlimited workflows
  • Team workspace
  • Email support
  • Advanced automation
  • Priority queue
  • Usage analytics
  • Role-based access
  • Custom integrations
  • Dedicated success manager

Installation

pnpm dlx shadcn@latest add @tween-ui/pricing-plan-switch

Usage

app/page.tsx
app/page.tsx
import PricingPlanSwitch from '@/components/tweenui/pricing/pricing-plan-switch';
 
export default function Page() {
  return <PricingPlanSwitch />;
}

Pass your own plans and features to make it yours — each plan lights up its first includedCount rows of the shared features list:

app/page.tsx
app/page.tsx
import PricingPlanSwitch from '@/components/tweenui/pricing/pricing-plan-switch';
 
const plans = [
  {
    id: 'starter',
    name: 'Starter',
    subtitle: 'For early-stage teams',
    description: 'Core automation and a shared workspace to keep momentum.',
    monthly: 2500,
    yearly: 25000,
    includedCount: 5,
  },
  {
    id: 'pro',
    name: 'Pro',
    subtitle: 'For growing teams',
    description: 'Advanced automation, priority workflows, and deeper analytics.',
    monthly: 4190,
    yearly: 41900,
    includedCount: 7,
  },
];
 
const features = [
  'Unlimited workflows',
  'Team workspace',
  'Email support',
  'Advanced automation',
  'Priority queue',
  'Usage analytics',
  'Role-based access',
];
 
export default function Page() {
  return <PricingPlanSwitch plans={plans} features={features} ctaHref="/signup" />;
}

Props

PropTypeDefaultDescription
plansPricingPlan[]3-tier samplePlans shown in the selector.
featuresstring[]sample listFeature checklist; each plan lights up its first includedCount rows.
eyebrowstring"Pricing"Eyebrow badge above the heading.
headingstring—Section heading.
descriptionstring—Section sub-heading.
currencystring"$"Currency symbol before the price.
ctaTextstring"Get started"Primary CTA label.
ctaHrefstring"#"Primary CTA link.

Each PricingPlan is { id, name, subtitle, description, monthly, yearly, includedCount }. Extends native <section> attributes (className, style, …).

Accessibility

The billing toggle is a real checkbox with an aria-label and a visible focus ring, so it is fully keyboard operable. Under prefers-reduced-motion: reduce the badge and description swap instantly with no crossfade, and the price still updates without spinning.