gamma logo

1

Pricing Interaction

PreviousNext

An interactive pricing switcher with animated numbers, selectable plans, and monthly/yearly billing modes.

Installation

pnpm dlx shadcn@latest add @gammaui/pricing-interaction

Usage

import { PricingInteraction } from "@/components/gammaui/pricing-interaction"

Basic Example

<PricingInteraction />

With Custom Container

<div className="bg-background rounded-xl border p-6 shadow-sm">
  <PricingInteraction />
</div>

Props

PropTypeDefaultDescription
classNamestring-Additional CSS classes

Features

  • Monthly / Yearly Billing Toggle
  • Animated Numbers using NumberFlow
  • Selectable Pricing Plans
  • Smooth Transitions
  • Accessible and Fully Keyboard-Navigable
  • Clean UI with TailwindCSS

Use Cases

  • SaaS Pricing Sections
  • Subscription Plans
  • Feature Comparison Pages
  • Upgrade / Checkout Screens