Minimal Single-Plan Pricing

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

import { Heading } from "@/components/editorial/heading"
import {
  Pricing,
  PricingCard,
  PricingCardAmount,
  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: "One plan, everything included",
  body: "No tiers to compare. Pay per member and get every feature from day one.",
} as const

const PLAN = {
  name: "Orbcore",
  price: "$12",
  period: "per member, per month",
  description: "Billed monthly. Cancel any time.",
  features: [
    "Unlimited projects and plans",
    "Review in context",
    "Handoff notes and weekly digest",
    "Single sign-on",
    "Priority support",
  ],
  cta: "Start a 14-day trial",
} as const

export default function MinimalPricing02() {
  return (
    <Section>
      <SectionHeader align="center">
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription>{COPY.body}</SectionDescription>
      </SectionHeader>
      <SectionContent>
        <Pricing cols={1} className="mx-auto w-full max-w-md">
          <PricingCard>
            <PricingCardHeader>
              <PricingCardTitle>{PLAN.name}</PricingCardTitle>
              <PricingCardPrice>
                <PricingCardAmount>{PLAN.price}</PricingCardAmount>
                <PricingCardPeriod>{PLAN.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({ size: "lg" }))}
              >
                {PLAN.cta}
              </a>
            </PricingCardFooter>
          </PricingCard>
        </Pricing>
      </SectionContent>
    </Section>
  )
}

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

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

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

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