Minimal Three-Plan Pricing

import { CheckIcon } from "@phosphor-icons/react/dist/ssr"
import { cn } from "cn"

import { Heading } from "@/components/editorial/heading"
import {
  Pricing,
  PricingCard,
  PricingCardAction,
  PricingCardAmount,
  PricingCardBadge,
  PricingCardContent,
  PricingCardDescription,
  PricingCardFeature,
  PricingCardFeatures,
  PricingCardFooter,
  PricingCardHeader,
  PricingCardPeriod,
  PricingCardPrice,
  PricingCardTitle,
} from "@/components/editorial/pricing"
import {
  Section,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import { buttonVariants } from "@/components/ui/button"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Simple pricing for every team",
  body: "Start free, upgrade when the team grows. Every plan includes unlimited projects.",
  period: "per month",
  popular: "Most popular",
} as const

const PLANS = [
  {
    name: "Starter",
    price: "$0",
    description: "For one person planning their own work.",
    features: ["3 projects", "Weekly digest", "Email support"],
    cta: "Start free",
    featured: false,
  },
  {
    name: "Team",
    price: "$12",
    description: "For teams that ship together, per member.",
    features: [
      "Unlimited projects",
      "Review in context",
      "Handoff notes",
      "Priority support",
    ],
    cta: "Start a trial",
    featured: true,
  },
  {
    name: "Business",
    price: "$24",
    description: "For companies with several teams, per member.",
    features: [
      "Everything in Team",
      "Single sign-on",
      "Audit log",
      "Dedicated contact",
    ],
    cta: "Talk to us",
    featured: false,
  },
] as const

export default function MinimalPricing01() {
  return (
    <Section>
      <SectionHeader align="center">
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription>{COPY.body}</SectionDescription>
      </SectionHeader>
      <SectionContent>
        <Pricing cols={3}>
          {PLANS.map((plan) => (
            <PricingCard key={plan.name} featured={plan.featured}>
              <PricingCardHeader>
                <PricingCardTitle>{plan.name}</PricingCardTitle>
                {plan.featured ? (
                  <PricingCardAction>
                    <PricingCardBadge>{COPY.popular}</PricingCardBadge>
                  </PricingCardAction>
                ) : null}
                <PricingCardPrice>
                  <PricingCardAmount>{plan.price}</PricingCardAmount>
                  <PricingCardPeriod>{COPY.period}</PricingCardPeriod>
                </PricingCardPrice>
                <PricingCardDescription>
                  {plan.description}
                </PricingCardDescription>
              </PricingCardHeader>
              <PricingCardContent>
                <PricingCardFeatures>
                  {plan.features.map((feature) => (
                    <PricingCardFeature key={feature}>
                      <CheckIcon weight="bold" aria-hidden="true" />
                      <span>{feature}</span>
                    </PricingCardFeature>
                  ))}
                </PricingCardFeatures>
              </PricingCardContent>
              <PricingCardFooter>
                <a
                  href="#"
                  data-slot="button"
                  className={cn(
                    buttonVariants({
                      variant: plan.featured ? "default" : "outline",
                    })
                  )}
                >
                  {plan.cta}
                </a>
              </PricingCardFooter>
            </PricingCard>
          ))}
        </Pricing>
      </SectionContent>
    </Section>
  )
}

pnpm dlx shadcn add @01orbital/minimal-pricing-01

npx shadcn add @01orbital/minimal-pricing-01

yarn shadcn add @01orbital/minimal-pricing-01

bunx --bun shadcn add @01orbital/minimal-pricing-01