Pricing Card

About this component

A complete pricing card with feature list, highlighted state, floating badge, and call to action.

Usage

The import and the props worth knowing about, in one place.

import { Card2 } from "@/components/beste/component/card2";

// CTA renders a <Link> when href is set, otherwise a <button> using onSelect.
<Card2
  plan="Pro"
  price="$19"
  period="/month"
  description="For freelancers shipping client sites."
  features={["Unlimited projects", "Lifetime updates", "Priority support"]}
  cta="Get started"
  href="/signup"
  highlighted            // accent border + floating badge
  badge="Most popular"   // badge text (default: "Most popular")
  footnote="No credit card required"
/>

<Card2
  plan="Starter"
  price="$0"
  period="/month"
  features={["3 projects", "Community support"]}
  cta="Start free"
  tone="dark"   // CTA: "primary" (default) | "dark"
  onSelect={() => console.log("start free")}
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`plan`*	`string`	—	Plan name (e.g. "Pro")
`price`*	`string`	—	Price (e.g. "$19")
`period`	`string`	—	Muted text after the price (e.g. "/month")
`description`	`string`	—	Short plan description under the price
`features`*	`string[]`	—	Feature list, one line each
`cta`*	`string`	—	CTA label
`href`	`string`	—	If set, the CTA renders as a link to this href
`onSelect`	`React.MouseEventHandler<HTMLButtonElement>`	—	CTA click handler (used when there is no href)
`highlighted`	`boolean`	—	Emphasize this plan: accent border plus the floating badge
`badge`	`string`	—	Floating badge text shown when highlighted (defaults to "Most popular")
`footnote`	`string`	—	Muted line under the CTA (e.g. "No credit card required")
`tone`	`"primary" \| "dark"`	—	CTA tone
`className`	`string`	—	Additional classes merged onto the root