# Pricing 4

> pricing

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/pricing-4).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/pricing-4
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/pricing-4/light.png
- Registry item: https://blocks.cnippet.dev/r/pricing-4.json
- Categories: pricing
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/pricing-4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `@cnippet/badge`, `@cnippet/button`, `@cnippet/switch`, `@cnippet/utils`

## Files

### `registry/default/sections/pricing-4.tsx`

```tsx
//biome-ignore-all lint/suspicious/noArrayIndexKey:<>

"use client";

import {
  Box,
  CheckCircle2,
  Download,
  Eye,
  MessageSquare,
  Timer,
} from "lucide-react";
import * as React from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

const plans = [
  {
    benefits: ["Increased Efficiency", "Great Communication"],
    buttonText: "Get Started With Basic",
    buttonVariant: "outline" as const,
    description: "Lorem ipsum dolor sit amet.",
    features: [
      { icon: Timer, label: "30 day", sublabel: "build retention" },
      { icon: Download, label: "5,000", sublabel: "downloads/month" },
      { icon: Box, label: "", sublabel: "Native module rebuilding" },
    ],
    icon: MessageSquare,
    iconBg: "bg-blue-600",
    id: "standard",
    name: "Standard",
    period: "/ Month",
    planDescription:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit etiam venenatis orci.",
    price: 49.99,
  },
  {
    benefits: ["Increased Efficiency", "Great Communication"],
    buttonText: "Get Started ~ $164",
    buttonVariant: "default" as const,
    description: "Lorem ipsum dolor sit amet.",
    featured: true,
    features: [
      { icon: Timer, label: "60 day", sublabel: "build retention" },
      { icon: Download, label: "15,000", sublabel: "downloads/month" },
      { icon: Box, label: "", sublabel: "Native module rebuilding" },
    ],
    icon: Eye,
    iconBg: "bg-blue-600",
    id: "plus",
    name: "Plus",
    period: "/ Month",
    planDescription:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit etiam venenatis orci.",
    price: 164.0,
  },
];

// Decorative circles
function DecorativeCircles({ className }: { className?: string }) {
  return (
    <div className={cn("pointer-events-none absolute", className)}>
      <div className="grid grid-cols-3 gap-2">
        {Array(9)
          .fill(0)
          .map((_, i) => (
            <div
              className="h-8 w-8 rounded-lg border border-gray-200 bg-white/50 dark:border-neutral-700 dark:bg-black dark:text-white dark:placeholder:text-gray-400"
              key={i}
            />
          ))}
      </div>
    </div>
  );
}

export function Pricing4() {
  const [yearly, setYearly] = React.useState(false);

  return (
    <section className="relative w-full overflow-hidden bg-[#f8fafc] py-16 md:py-24">
      {/* Decorative elements */}
      <DecorativeCircles className="top-20 left-8 opacity-50" />
      <DecorativeCircles className="top-40 right-12 opacity-50" />
      <DecorativeCircles className="bottom-32 left-16 opacity-50" />
      <DecorativeCircles className="right-8 bottom-20 opacity-50" />

      {/* Gray circle decorations */}
      <div className="absolute top-10 left-20 h-24 w-24 rounded-full bg-neutral-200/50" />
      <div className="absolute right-32 bottom-20 h-16 w-16 rounded-full bg-neutral-200/50" />

      <div className="relative mx-auto w-full max-w-4xl px-6">
        {/* Header */}
        <div className="mb-10 text-center">
          <Badge
            className="mb-4 gap-1.5 rounded-full px-4 py-1.5"
            variant="outline"
          >
            <span className="text-yellow-500">⚡</span>
            Beam Our Pricing
          </Badge>
          <h2 className="mb-6 font-normal text-3xl text-gray-900 md:text-5xl dark:text-gray-100">
            Beam Pricing Plans
          </h2>

          {/* Billing Toggle */}
          <div className="flex items-center justify-center gap-3">
            <span
              className={cn(
                "text-sm",
                !yearly && "font-medium text-gray-900 dark:text-gray-100",
              )}
            >
              Monthly
            </span>
            <Switch checked={yearly} onCheckedChange={setYearly} />
            <span
              className={cn(
                "text-sm",
                yearly && "font-medium text-gray-900 dark:text-gray-100",
              )}
            >
              Yearly
            </span>
          </div>
        </div>

        {/* Plan Selection Row */}
        <div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
          {plans.map((plan) => {
            const Icon = plan.icon;
            return (
              <div
                className="flex items-center gap-4 rounded-2xl border border-gray-200 bg-white p-4 dark:border-neutral-700 dark:bg-black dark:text-white dark:placeholder:text-gray-400"
                key={plan.id}
              >
                <div
                  className={cn(
                    "flex h-12 w-12 items-center justify-center rounded-xl",
                    plan.iconBg,
                  )}
                >
                  <Icon className="h-5 w-5 text-white" />
                </div>
                <div>
                  <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                    {plan.name}
                  </h3>
                  <p className="text-gray-600 text-sm dark:text-gray-400">
                    {plan.description}
                  </p>
                </div>
              </div>
            );
          })}
        </div>

        {/* Pricing Cards */}
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          {plans.map((plan) => (
            <div
              className="rounded-2xl border border-gray-200 bg-white p-6 dark:border-neutral-700 dark:bg-black dark:text-white dark:placeholder:text-gray-400"
              key={`card-${plan.id}`}
            >
              {/* Price */}
              <div className="mb-4">
                <span className="font-normal text-3xl text-gray-900 md:text-5xl dark:text-gray-100">
                  $
                  {yearly
                    ? (plan.price * 10).toFixed(2)
                    : plan.price.toFixed(2)}
                </span>
                <span className="ml-2 text-gray-600 dark:text-gray-400">
                  {plan.period}
                </span>
              </div>

              {/* Description */}
              <p className="mb-6 text-gray-600 text-sm dark:text-gray-400">
                {plan.planDescription}
              </p>

              {/* CTA Button */}
              <Button
                className={cn(
                  "mb-6 h-11 w-full rounded-xl",
                  plan.featured && "bg-blue-600 text-white hover:bg-blue-700",
                )}
                variant={plan.buttonVariant}
              >
                {plan.buttonText}
              </Button>

              {/* Features Section */}
              <div className="mb-4">
                <p className="mb-3 font-semibold text-gray-600 text-xs uppercase tracking-wide dark:text-gray-400">
                  WEEKLY SENDS
                </p>
                <ul className="space-y-3">
                  {plan.features.map((feature, index) => {
                    const FeatureIcon = feature.icon;
                    return (
                      <li
                        className="flex items-center gap-3 text-sm"
                        key={index}
                      >
                        <FeatureIcon className="h-4 w-4 text-neutral-400" />
                        <span>
                          {feature.label && (
                            <strong className="text-gray-900 dark:text-gray-100">
                              {feature.label}
                            </strong>
                          )}{" "}
                          <span className="text-gray-600 dark:text-gray-400">
                            {feature.sublabel}
                          </span>
                        </span>
                      </li>
                    );
                  })}
                </ul>
              </div>

              {/* Benefits */}
              <ul className="space-y-2 border-neutral-100 border-t pt-4">
                {plan.benefits.map((benefit, index) => (
                  <li
                    className="flex items-center gap-2 text-gray-700 text-sm dark:text-gray-300"
                    key={index}
                  >
                    <CheckCircle2 className="h-4 w-4 text-blue-600" />
                    {benefit}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default Pricing4;
```