Get Updates
Documentation
Sections
Pricing

Pricing Section

A dynamic pricing section with animated cards, confetti effects, and monthly/yearly toggle.

Christer Hagen

Written by Christer Hagen

Simple, Transparent Pricing

Choose the plan that works for you
All plans include access to our platform, lead generation tools, and dedicated support.

Annual billing (Save 20%)

STARTER

$50/ per month

billed monthly

  • Up to 10 projects
  • Basic analytics
  • 48-hour support response time
  • Limited API access
  • Community support
Start Free Trial

Perfect for individuals and small projects

Popular

PROFESSIONAL

$99/ per month

billed monthly

  • Unlimited projects
  • Advanced analytics
  • 24-hour support response time
  • Full API access
  • Priority support
  • Team collaboration
  • Custom integrations
Get Started

Ideal for growing teams and businesses

ENTERPRISE

$299/ per month

billed monthly

  • Everything in Professional
  • Custom solutions
  • Dedicated account manager
  • 1-hour support response time
  • SSO Authentication
  • Advanced security
  • Custom contracts
  • SLA agreement
Contact Sales

For large organizations with specific needs

A modern pricing section with interactive features, smooth animations, and responsive design. Perfect for showcasing different pricing tiers with a dynamic monthly/yearly toggle.

Features

  • Animated pricing cards with Framer Motion
  • Interactive monthly/yearly pricing toggle with confetti effect
  • Responsive design with mobile-first approach
  • Dynamic price updates with NumberFlow animations
  • Popular plan highlighting
  • Dark mode compatible

Dependencies

{
  "dependencies": [
    "@/components/section",
    "@/components/ui/button",
    "@/components/ui/label",
    "@/components/ui/switch",
    "framer-motion",
    "canvas-confetti",
    "@number-flow/react"
  ]
}

Usage

The Pricing section is designed to be used as a full-width section in your landing page or pricing page. It includes:

  • Animated price cards with popular plan highlighting
  • Interactive monthly/yearly toggle with confetti effects
  • Smooth price transitions using NumberFlow
  • Responsive layout that adapts to all screen sizes
  • Built-in dark mode support
  • Accessible toggle controls and pricing information

Customization

The section can be customized through your global Tailwind theme:

  • Colors through primary, secondary, and muted color tokens
  • Typography through font family and size utilities
  • Spacing and layout through padding and margin utilities
  • Animations through Framer Motion configuration
  • Card styles through border and shadow utilities