Free
For hobbyists and side projects
Free
- Up to 3 projects
- Basic analytics
- Community support
- Custom domain
- Priority support
Most Popular
Pro
For professionals and growing teams
$29/mo
- Unlimited projects
- Advanced analytics
- Priority support
- Custom domain
- API access
Enterprise
For large organizations
$99/mo
- Everything in Pro
- SSO & SAML
- Dedicated support
- Custom integrations
- SLA guarantee
Overview
A beautiful pricing card component for displaying product tiers with features, pricing, and checkout actions. Supports monthly/yearly/one-time pricing, popular badges, and disabled states.
Installation
npx shadcn@latest add "https://elements.crfrst.dev/r/polar-pricing-card"Usage
import { PolarPricingCard } from "@/components/elements/polar-pricing-card";
export function PricingSection() {
return (
<PolarPricingCard
name="Pro"
description="For professionals and growing teams"
price={29}
interval="month"
features={[
"Unlimited projects",
"Advanced analytics",
{ text: "Custom domain", included: true },
{ text: "White label", included: false },
]}
popular
highlighted
ctaText="Start Free Trial"
onCheckout={() => {
// Redirect to Polar checkout
}}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Product/tier name |
description | string | - | Short description |
price | number | - | Price amount (0 for free) |
currency | string | "$" | Currency symbol |
interval | "month" | "year" | "one_time" | "month" | Billing interval |
features | (string | { text: string; included?: boolean })[] | - | List of features |
popular | boolean | false | Show "Most Popular" badge |
highlighted | boolean | false | Highlight with primary color |
ctaText | string | "Get Started" | Button text |
ctaUrl | string | - | Checkout URL |
onCheckout | () => void | - | Checkout handler |
disabled | boolean | false | Disable button |
Features
- Monthly/yearly/one-time pricing display
- Feature list with included/excluded indicators
- Popular badge with sparkles icon
- Highlighted variant with primary color
- Hover animations
- Accessible button states