Plus
For freelancers and households.
$29, per month
- Everything in Starter
- Up to 10 virtual cards
- Lower fees abroad
- Chat support
Pricing Card
Shows one plan with its price, what it includes and the button to choose it, lined up with the plans beside it.
Configurations
3 examplesDefault
Plus
For freelancers and households.
$29, per month
- Everything in Starter
- Up to 10 virtual cards
- Lower fees abroad
- Chat support
Featured
Plus
Most pickedFor freelancers and households.
$29, per month
- Everything in Starter
- Up to 10 virtual cards
- Lower fees abroad
- Chat support
Free plan
Starter
For one person and one wallet.
$0, Free for good, no card asked
- One multi-currency wallet
- One virtual card
- Help by email
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
PricingCard
| Prop | Type | Default | Description |
|---|---|---|---|
| namereq | React.ReactNode | - | The plan's name, rendered as an h3 that names the card. |
| description | React.ReactNode | - | One line on who the plan is for. |
| pricereq | number|string | - | The figure. A number is grouped for reading (1,000); a string is shown as given. |
| currency | string | '$' | The small glyph before the figure. Pass '' for a word price such as "Custom". |
| period | string | - | The note under the price: "per month", or what makes a free plan free. |
| features | string[] | [] | What the plan includes, one check mark each. |
| cta | string | - | The action's label; the card renders the Button in the right lane for its state and theme. |
| onCta | () => void | - | Called when the `cta` Button is pressed. |
| action | React.ReactNode | ((variant: 'default'|'outline') => React.ReactNode) | - | Replaces the `cta` Button. A function is called with the lane to use, once per theme on a featured card, so a link Button (asChild) keeps the theme rule. |
| markers | boolean | true | Corner markers on the card; ignored when featured. |
| featured | boolean | false | The recommended plan: solid fill, its own ink, no corner markers, leads when stacked. |
| featuredLabel | string | 'Recommended' | What a screen reader hears beside the name of the featured plan; the fill is the visible badge. |
PricingGrid
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | number | - | Plans per row on desktop; defaults to the number of cards. |
| childrenreq | React.ReactNode | - | PricingCards. |
AI Canvas