Pricing Card One

A simple pricing plan card with icon, price, features, and CTA.
Supports tones, “Recommended” badge, and button link/onClick.

Example

the starter choise

$5/month

Recommended

the starter choise

$15/month

npx shadcn-extras@latest add pricing-card-one

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Big icon above title.
`name`	`string`	—	Plan name.
`subtitle`	`string`	`'the starter choice'`	Small subtitle.
`price`	`number \| string`	—	Either a number (uses `currency`) or a preformatted string.
`currency`	`string`	`'$'`	Prefix used when `price` is a number.
`periodLabel`	`string`	`'/month'`	Shown next to price.
`recommended`	`boolean`	`false`	Shows badge and uses filled CTA style.
`recommendedLabel`	`string`	`'Recommended'`	Badge text.
`features`	`{ label: ReactNode; included?: boolean }[]`	`[]`	List items; `included` defaults to `true`.
`cta`	`AnchorOrButton & { label?: string }`	—	Pass `href` or `onClick`.
`tone`	`'indigo' \| 'blue' \| 'emerald' \| 'zinc'`	`'blue'`	Accent color.
`variant`	`'outline' \| 'elevated' \| 'soft'`	`'outline'`	Surface style.
`*ClassName`	`string`	—	Slot overrides for fine styling control.