Pricing
A pricing component to showcase your product's pricing plans
Pricing
Use Runway to save hours of coding and launch faster.
Starter
$99
$49
- NextJS boilerplate
- Component library
- Database
- Payments
- Auth
- Email Service
- Lifetime updates
- SEO tools
Pay once, use forever.
Most Popular
All-in
$149
$99
- NextJS boilerplate
- Component library
- Database
- Payments
- Auth
- Email Service
- Lifetime updates
- SEO tools
Pay once, use forever.
The Pricing component is a way to showcase your product's pricing plans and allow users to compare and choose the best plan for their needs.
This relies on pricingConfig for its data so you have to configure payments first.
Want a much more simple, minimalistic flow? You can simply use CheckoutButton to create a checkout button for your product.
Usage
javascript
1import Pricing from '@/components/landing/Pricing'; 2 3<Pricing />
Props
| Name | Type | Default | Description |
|---|---|---|---|
| title | string | "" | The title of the component. |
| subtitle | string | "" | The subtitle of the component. |
| cardBackground | string | "bg-bg-50 dark:bg-bg-900" | The background color of the cards (see tailwind.config). |
That's it, the rest is pulled from pricingConfig.