Pricing Card
Cards & Layout
Animated pricing plan card with title, price, period, feature list, CTA button, and optional popular badge with hover scale and glow.
Loading preview...
Customize
Title
Price
Period
CTA Text
Popular
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Plan name displayed at the top. |
price | string | — | Price text (e.g. '$29'). |
period | string | '/mo' | Billing period suffix. |
features | string[] | — | List of feature strings. |
cta | string | 'Get Started' | Call-to-action button text. |
popular | boolean | false | Show the popular badge and highlight border. |
onCtaClick | () => void | undefined | Callback when the CTA button is clicked. |
className | string | '' | Additional CSS classes. |