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")}
/>

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

Pro

$19/month

For freelancers shipping client sites.

Unlimited projects
1,400+ blocks and components
Lifetime updates
Priority support

No credit card required

Usage

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

<Card2
  plan="Pro"
  price="$19"
  period="/month"
  description="For freelancers shipping client sites."
  features={["Unlimited projects","1,400+ blocks and components","Lifetime updates","Priority support"]}
  cta="Get started"
  highlighted
  footnote="No credit card required"
/>

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

More Card components

View all Card

-22%

Atlas Field Watch

4.8

$249$320

Product Card

A product card with image, price, discount badge, wishlist toggle, and add to cart action for shop grids.

Orbit One

$189

Shop now

Product Overlay Card

A product card with a full bleed photo, overlaid name and price, and a floating pill button.

Featured

Pro blocks drop monthly

A new themed set of sections lands every month, with free updates forever.

Learn more

Gradient Beam Card

A featured callout card wrapped in an orbiting gradient border beam for highlights and announcements.

Ready when you are

Start building today

Copy your first block in under a minute. No account needed.

Browse blocks See pricing

CTA Card

A call to action card with eyebrow, title, description, and buttons for section endings and banners.

Ship in minutes

Copy a block, wire up your content, and deploy. No boilerplate, no configuration, no lock in.

Learn more

Spotlight Feature Card

A feature card with an icon tile and a cursor tracking spotlight for landing page feature grids.

Join the beta program

We are opening a short testing window for the new builder. Help shape it before launch.

Only 25 seats

Applications close Jul 18.

Request access

Promo Card

A dismissible promo card with image, deadline line, and apply button for programs and offers.