Pricing Card Two

Matches the “3 cards with colored borders” layout. Pass your own icon, data, and tone.

Example

the starter choise

$5/month

the starter choise

$15/month

the starter choise

$25/month

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

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Large top icon.
`name`	`string`	—	Plan name.
`subtitle`	`string`	`'the starter choise'`	Small helper text.
`price`	`number \| string`	—	Price (number uses `currency`).
`currency`	`string`	`'$'`	Currency prefix when `price` is a number.
`periodLabel`	`string`	`'/month'`	Next to price.
`features`	`{ label: ReactNode; included?: boolean }[]`	`[]`	List of features; `included` defaults to `true`.
`cta`	`href` or `onClick` + `label?`	—	Call-to-action (link or button).
`tone`	`'pink' \| 'blue' \| 'amber' \| 'emerald' \| 'zinc'`	`'blue'`	Accent color.
`*ClassName`	`string`	—	Slot class overrides.