# Pricing Single

One honest plan: a big price, everything included, and a guarantee.

**Kind:** section · Pricing  
**Styles:** Minimal, Light  
**Built from:** button  
**Live preview:** https://charcoalui.com/preview/section/pricing-single

## Install

```bash
npx shadcn@latest add https://charcoalui.com/r/pricing-single.json
```
Lands in `components/sections/pricing-single.tsx` and installs every component it uses.

## Props (all optional, for your copy)

```ts
export type PricingSingleProps = {
  title?: string;
  subtitle?: string;
  price?: string;
  period?: string;
  features?: string[];
  cta?: string;
  guarantee?: string;
};
```

## Source

```tsx
"use client";

import { Check, ShieldCheck } from "lucide-react";
import { Button } from "@/components/ui/button";

export type PricingSingleProps = {
  title?: string;
  subtitle?: string;
  price?: string;
  period?: string;
  features?: string[];
  cta?: string;
  guarantee?: string;
};

export function PricingSingle({
  title = "One plan. Everything included.",
  subtitle = "No tiers to compare and no features held back. Try it free for a week.",
  price = "$4.99",
  period = "per month, or $39 a year",
  features = ["Unlimited wind-down routines", "Sleep score and weekly report", "Quiet hours for every app", "Family sharing for up to 5 people", "All future features"],
  cta = "Start your free week",
  guarantee = "Cancel any time in two taps. Full refund within 30 days.",
}: PricingSingleProps) {
  return (
    <section className="bg-background">
      <div className="mx-auto max-w-6xl px-6 py-24 sm:py-32">
        <div className="mx-auto grid grid-cols-1 max-w-4xl overflow-hidden rounded-3xl border bg-card md:grid-cols-[1.2fr_1fr]">
          <div className="p-8 sm:p-10">
            <h2 className="text-3xl font-semibold tracking-tight text-balance">{title}</h2>
            <p className="mt-3 text-muted-foreground">{subtitle}</p>
            <ul className="mt-8 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-1">
              {features.map((f) => (
                <li key={f} className="flex items-start gap-2.5 text-sm">
                  <Check className="mt-0.5 size-4 shrink-0 text-ember" /> {f}
                </li>
              ))}
            </ul>
          </div>
          <div className="flex flex-col items-center justify-center gap-2 border-t bg-[radial-gradient(circle_at_50%_0%,var(--color-ember-glow),transparent_70%)] p-8 text-center sm:p-10 md:border-l md:border-t-0">
            <p className="text-6xl font-semibold tracking-tight">{price}</p>
            <p className="text-sm text-muted-foreground">{period}</p>
            <Button size="lg" variant="ember" className="mt-6 w-full">
              {cta}
            </Button>
            <p className="mt-4 flex items-start gap-2 text-left text-xs leading-5 text-muted-foreground">
              <ShieldCheck className="size-4 shrink-0" /> {guarantee}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}
```