# Pricing Single Plan Spotlight — Tailwind Pricing Section

> One plan presented large inside a slowly rotating gradient border, with a staggered included list, crossed-out extras and a money-back guarantee.

- Category: [Pricing](https://pixelpapa.com/components/pricing.md)
- Tags: pricing, single plan, spotlight, guarantee, border
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/pricing/pricing-single-plan-spotlight

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/pricing-single-plan-spotlight.json"
```

The file is written to `components/pixelpapa/pricing-single-plan-spotlight.tsx`. To install manually, run `npm install lucide-react motion` and copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import { ArrowRight, Check, ShieldCheck } from "lucide-react";
import { motion } from "motion/react";

type Props = {
  product?: string;
  price?: number;
  included?: string[];
  never?: string[];
};

const defaultIncluded = [
  "Unlimited invoices and clients",
  "Payment links with card and bank transfer",
  "Automatic late-payment reminders",
  "Multi-currency with live rates",
  "Expense capture from email receipts",
  "Quarterly tax summary export",
  "Your logo, colours and domain",
  "Accountant access at no cost",
];

const defaultNever = ["Per-invoice fees", "Setup costs", "Paid support tiers"];

const ease = [0.22, 1, 0.36, 1] as const;

export default function PricingSinglePlanSpotlight({
  product = "Tallyho",
  price = 19,
  included = defaultIncluded,
  never = defaultNever,
}: Props) {
  return (
    <section className="relative overflow-hidden bg-background px-6 py-24">
      <style>{`@keyframes pp-pricing-single-plan-spotlight-spin { to { transform: rotate(360deg); } }`}</style>
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-[480px] [background:radial-gradient(50%_60%_at_50%_0%,color-mix(in_oklch,var(--primary)_14%,transparent),transparent)]"
      />
      <div className="relative mx-auto max-w-4xl">
        <div className="text-center">
          <p className="text-sm font-medium text-primary">One plan. Everything in it.</p>
          <h2 className="mx-auto mt-3 max-w-2xl text-4xl font-semibold tracking-tight text-balance text-foreground sm:text-5xl">
            {product} costs the same on day one as on day one thousand
          </h2>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 28, scale: 0.98 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          transition={{ duration: 0.7, ease }}
          className="relative mt-12 overflow-hidden rounded-[2rem] p-px shadow-2xl shadow-primary/10"
        >
          {/* Oversized conic gradient spinning behind a 1px gap = moving border. */}
          <div
            aria-hidden
            className="absolute top-1/2 left-1/2 -mt-[75%] -ml-[75%] aspect-square w-[150%] motion-reduce:animate-none"
            style={{
              background: "conic-gradient(from 0deg, var(--border) 0deg, var(--border) 200deg, var(--primary) 290deg, var(--chart-2) 330deg, var(--border) 360deg)",
              animation: "pp-pricing-single-plan-spotlight-spin 7s linear infinite",
            }}
          />
          <div className="relative grid rounded-[calc(2rem-1px)] bg-card md:grid-cols-[0.9fr_1.1fr]">
            <div className="flex flex-col p-8 sm:p-10">
              <span className="w-fit rounded-full border border-border px-3 py-1 text-xs font-medium text-muted-foreground">
                {product} Complete
              </span>
              <p className="mt-6 flex items-baseline gap-2">
                <span className="text-7xl font-semibold tracking-tighter text-card-foreground sm:text-8xl">${price}</span>
                <span className="text-sm text-muted-foreground">
                  per month
                  <br />
                  flat, for the whole business
                </span>
              </p>
              <a
                href="#"
                className="group mt-8 flex h-12 items-center justify-center gap-2 rounded-full bg-primary text-sm font-medium text-primary-foreground shadow-lg shadow-primary/25 transition-transform hover:-translate-y-0.5"
              >
                Start 30-day trial
                <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
              </a>
              <p className="mt-3 mb-8 text-center text-xs text-muted-foreground">No card needed. Import from a spreadsheet in two minutes.</p>

              <div className="flex items-start gap-3 rounded-2xl bg-emerald-500/10 p-4 md:mt-auto">
                <ShieldCheck className="mt-0.5 size-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
                <p className="text-sm text-card-foreground">
                  <span className="font-medium">60-day money-back guarantee.</span>{" "}
                  <span className="text-muted-foreground">If it does not get you paid faster, email us and we refund every cent.</span>
                </p>
              </div>
            </div>

            <div className="border-t border-border p-8 sm:p-10 md:border-t-0 md:border-l">
              <p className="text-xs font-medium tracking-wider text-muted-foreground uppercase">Everything included</p>
              <motion.ul
                initial="hidden"
                animate="shown"
                transition={{ staggerChildren: 0.05, delayChildren: 0.25 }}
                className="mt-5 space-y-3.5"
              >
                {included.map((item) => (
                  <motion.li
                    key={item}
                    variants={{ hidden: { opacity: 0, x: -10 }, shown: { opacity: 1, x: 0 } }}
                    transition={{ duration: 0.45, ease }}
                    className="flex items-center gap-3 text-sm text-card-foreground"
                  >
                    <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground">
                      <Check className="size-3" strokeWidth={3} />
                    </span>
                    {item}
                  </motion.li>
                ))}
              </motion.ul>

              <p className="mt-8 text-xs font-medium tracking-wider text-muted-foreground uppercase">Things we will never charge for</p>
              <ul className="mt-4 flex flex-wrap gap-2">
                {never.map((item) => (
                  <li key={item} className="rounded-full bg-muted px-3 py-1 text-sm text-muted-foreground line-through decoration-muted-foreground/50">
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
```

## AI prompt

```text
Add the "Pricing Single Plan Spotlight" component from PixelPapa UI to this project.

What it is: One plan presented large inside a slowly rotating gradient border, with a staggered included list, crossed-out extras and a money-back guarantee.
Category: Pricing. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/pricing-single-plan-spotlight.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/pricing-single-plan-spotlight.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/pricing-single-plan-spotlight" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More pricing

- [Pricing Addon Builder](https://pixelpapa.com/components/pricing/pricing-addon-builder.md) (Pro): Build a plan by switching add-ons on and off; each one slides onto a receipt and the running total rolls to its new value.
- [Pricing Comparison Matrix](https://pixelpapa.com/components/pricing/pricing-comparison-matrix.md) (Pro): A feature-by-feature plan table with a sticky plan header, grouped rows, a column that highlights on hover and checkmarks that draw themselves in.
- [Pricing Credits Packs](https://pixelpapa.com/components/pricing/pricing-credits-packs.md): Pay-as-you-go credit packs as radio cards with growing coin stacks, a best-value corner ribbon and a selection ring that glides to the chosen pack.
- [Pricing Currency Switcher](https://pixelpapa.com/components/pricing/pricing-currency-switcher.md) (Pro): Three plans in one divided panel with a hand-built currency menu; choosing a currency counts every price to its localised amount.
- [Pricing Enterprise Contact](https://pixelpapa.com/components/pricing/pricing-enterprise-contact.md) (Pro): Two self-serve plans beside an inverted enterprise card with a named contact and a short form that morphs into a confirmation.
- [Pricing Horizontal Rows](https://pixelpapa.com/components/pricing/pricing-horizontal-rows.md): An editorial price list: each plan is a full-width row with a serif name, and an inverted fill wipes up from the bottom edge on hover.