Subscription PricingSubscription Pricing Dark
page.tsx
import SubscriptionPricing from "@/components/subscription-pricing";
You can configure the Subscription Pricing component by changing the values like the name, the price, etc. inside of the src/config/subscription-pricing.ts file. More details about the configuration can be found in the Payments section.

​
Usage

example.tsx
<SubscriptionPricing />

​
Tips

When customizing the Subscription Pricing component:
  • Clearly differentiate the value proposition for each tier
  • Use benefit-oriented language for feature descriptions
  • Highlight savings for annual plans to encourage longer commitments
  • Keep feature lists concise and easy to compare across tiers
  • Use action-oriented language for CTAs (e.g., “Get Started” or “Upgrade Now”)
If you need basic components like buttons, inputs, and more, they are available with Shadcn UI.