PricingCard
PricingCard Component
Playground
Starter
$9/mo
- 5 projects
- 10GB storage
- Email support
Props
| Prop | Type | Default | Value |
|---|---|---|---|
| title | text | — | |
| price | text | — | |
| highlighted | boolean | — | |
| badge | text | — |
Default
Starter
$9/mo
- 5 projects
- 10GB storage
- Email support
Highlighted
Pro
$29/mo
- Unlimited projects
- 100GB storage
- Priority support
- API access
WithBadge
Most Popular
Pro
$29/mo
- Everything in Starter
- Team features
| PROP | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
badge | text | — | Badge text |
highlighted | boolean | — | Highlighted state |
price | text | — | Price |
title | text | — | Plan name |
Using PricingCardtsx
import { PricingCard } from '@/components/PricingCard'
<PricingCard
title="..."
price="..."
highlighted="..."
badge="..."
/>Tokens Used
No design tokens detected