Interactive

A pricing section that updates prices and highlights as buyers select options. Use it when choices like seats or add ons should reflect cost instantly.

import { useState } from 'react';

import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Slider } from '@/components/ui/slider';
import { Badge } from '@/components/ui/badge';
import { CheckIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

// Pricing tiers
const tiers = [
  {
    name: 'Starter',
    basePrice: 29,
    pricePerUser: 9,
    features: [
      'All core features',
      'Up to 10 projects',
      '5GB storage per user',
      'Basic analytics',
      'Email support',
    ],
    recommended: false,
  },
  {
    name: 'Business',
    basePrice: 99,
    pricePerUser: 7,
    features: [
      'All Starter features',
      'Unlimited projects',
      '20GB storage per user',
      'Advanced analytics',
      'Priority support',
      'API access',
      'Custom domains',
    ],
    recommended: true,
  },
  {
    name: 'Enterprise',
    basePrice: 299,
    pricePerUser: 5,
    features: [
      'All Business features',
      'Unlimited projects',
      '50GB storage per user',
      'Advanced analytics',
      '24/7 phone support',
      'API access',
      'Custom domains',
      'SSO authentication',
      'Custom integrations',
      'Dedicated account manager',
    ],
    recommended: false,
  },
];

export default function PricingSectionInteractive() {
  const [userCount, setUserCount] = useState(5);

  // Calculate prices based on user count
  const calculatePrice = (basePrice: number, pricePerUser: number) => {
    return basePrice + pricePerUser * userCount;
  };

  return (
    <section className="from-background to-muted/30 w-full bg-gradient-to-b py-12 md:py-24 lg:py-32">
      <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
        <div className="flex flex-col items-center justify-center space-y-4 text-center">
          <div className="space-y-2">
            <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
              Scale your pricing with your team
            </h2>
            <p className="text-muted-foreground mx-auto max-w-[700px] md:text-xl/relaxed">
              Our flexible pricing adapts to your team size. Choose the plan
              that works best for you.
            </p>
          </div>
        </div>

        <div className="mx-auto mt-8 max-w-3xl">
          <div className="bg-card rounded-lg border p-6 shadow-sm">
            <div className="mb-4 flex items-center justify-between">
              <h3 className="text-lg font-medium">Team Size</h3>
              <div className="bg-primary/10 flex items-center rounded-full px-3 py-1">
                <span className="text-primary text-xl font-bold">
                  {userCount}
                </span>
                <span className="text-muted-foreground ml-1 text-sm">
                  users
                </span>
              </div>
            </div>
            <Slider
              defaultValue={[5]}
              max={50}
              min={1}
              step={1}
              onValueChange={(value) => setUserCount(value[0]!)}
              className="py-4"
            />
            <div className="text-muted-foreground mt-1 flex justify-between text-xs">
              <span>1 user</span>
              <span>25 users</span>
              <span>50 users</span>
            </div>
          </div>
        </div>

        <div className="mx-auto mt-8 grid max-w-5xl gap-6 md:grid-cols-3">
          {tiers.map((tier) => {
            const price = calculatePrice(tier.basePrice, tier.pricePerUser);
            return (
              <Card
                key={tier.name}
                className={cn(
                  'relative flex flex-col',
                  tier.recommended && 'border-primary shadow-md'
                )}
              >
                {tier.recommended && (
                  <Badge
                    className="absolute -top-2.5 left-1/2 -translate-x-1/2"
                    variant="default"
                  >
                    Recommended
                  </Badge>
                )}
                <CardHeader>
                  <CardTitle>{tier.name}</CardTitle>
                  <div className="mt-4 flex items-baseline">
                    <span className="text-4xl font-bold">${price}</span>
                    <span className="text-muted-foreground ml-1 text-sm">
                      /month
                    </span>
                  </div>
                  <div className="text-muted-foreground mt-1 text-xs">
                    ${tier.basePrice} base + ${tier.pricePerUser} per user
                  </div>
                </CardHeader>
                <CardContent className="flex-1">
                  <ul className="space-y-2 text-sm">
                    {tier.features.map((feature) => (
                      <li key={feature} className="flex items-center">
                        <CheckIcon className="text-primary mr-2 h-4 w-4" />
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
                <CardFooter>
                  <Button
                    className="w-full"
                    variant={tier.recommended ? 'default' : 'outline'}
                    asChild
                  >
                    <a href="/signup">Get Started</a>
                  </Button>
                </CardFooter>
              </Card>
            );
          })}
        </div>

        <div className="mt-12 text-center">
          <p className="text-muted-foreground text-sm">
            All plans include a 14-day free trial. No credit card required.
          </p>
          <p className="mt-2 text-sm">
            Need more than 50 users?{' '}
            <a
              href="/contact"
              className="text-primary underline underline-offset-4"
            >
              Contact our sales team
            </a>{' '}
            for a custom quote.
          </p>
        </div>
      </div>
    </section>
  );
}

About this block

Interactive Pricing is a seat-based pricing section. A centered heading and subheading introduce the block, followed by a full-width slider card that lets visitors drag a team size from 1 to 50 users while a live counter badge reflects the current value. Below the slider, three plan cards sit in a responsive grid. Each card shows a plan name, a computed monthly price (base fee plus a per-user rate), the formula that produced it, a checked feature list, and a call to action button. The middle card carries a "Recommended" badge and a highlighted border to draw the eye. A small footnote at the bottom notes the free trial and links to sales for larger teams.

Every piece of copy is independent: plan names, base prices, per-user rates, and feature lists are all defined in a single data array, so you can swap them without touching the layout. The slider range and step size are also easy to adjust, and the footer note can be removed or reworded to match your trial policy.

When to use

Reach for this block when the product charges per seat and buyers need to see a real number before they commit. It is well suited to a fintech or banking platform where finance teams are counting heads and approving budgets: the live calculation removes ambiguity about what they will actually pay. Compared to a static Cards layout, the slider gives procurement-minded buyers confidence without requiring them to do mental arithmetic.

A natural flow around it on a Marketing (Legacy) page:

Before

A Hero Section to establish the product value before buyers reach the number
A Feature Section so visitors understand what they are paying for

After

A FAQ Section to address billing questions that surface right after price consideration
A CTA Section to close the page once buyers have settled on a plan

What you can customize

The three plan cards and the slider are the main variables. A few things worth noting:

Per-user rates. Each tier has its own base fee and per-user rate, so you can model volume discounts or flat fees simply by setting the per-user value to zero on a fixed-price plan.
Feature lists. The checked items under each plan are plain strings in the data array, so you can reorder, add, or remove them without affecting the price logic.
Slider bounds. The control runs from 1 to 50 with a step of 1; adjust the max and step to fit your actual seat tiers, for example steps of 5 for a product sold in team packs.

Tip: mark the plan your data shows is most commonly purchased as recommended so the highlighted card guides buyers toward the conversion you want.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A Hero Section to establish the product value before buyers reach the number
A Feature Section so visitors understand what they are paying for

After

A FAQ Section to address billing questions that surface right after price consideration
A CTA Section to close the page once buyers have settled on a plan

What you can customize

The three plan cards and the slider are the main variables. A few things worth noting:

Per-user rates. Each tier has its own base fee and per-user rate, so you can model volume discounts or flat fees simply by setting the per-user value to zero on a fixed-price plan.
Feature lists. The checked items under each plan are plain strings in the data array, so you can reorder, add, or remove them without affecting the price logic.
Slider bounds. The control runs from 1 to 50 with a step of 1; adjust the max and step to fit your actual seat tiers, for example steps of 5 for a product sold in team packs.

Tip: mark the plan your data shows is most commonly purchased as recommended so the highlighted card guides buyers toward the conversion you want.

Interactive

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize