One price doesn’t fit all
<PricingTable /> enables flexible pricing and seat based billing in one drop-in component.
Set monthly or annual payments
Users choose their preferred option at checkout.
List features per plan
Users see exactly what’s included before they subscribe.
Add seat based billing
Seat based billing can be included in your plans without building the logic yourself.
Set your free trial length
When a user checks out, the trial length is passed directly to <CheckoutButton /> automatically.
Customizable to your brand
Match the look and feel of your product with full styling control. Override themes, layout, and behaviors to create an account menu that feels native to your app.
- Theme tokens and CSS overrides
- Dark mode support
- Works in both server and client components
- Unlimited members
- Scale without thinking
- More usage + control
- Customize branding
- MFA included
Implement pricing in minutes
Drop-in <PricingTable />
Build secure, scalable authentication in minutes with Clerk’s SDKs. Drop in pre-built UI components and onboard users instantly, without friction or security concerns.
Clerk API
Custom flows
Want full control over your onboarding experience? Our headless APIs give you the flexibility to build exactly what you need.
import { usePlans } from "@clerk/react/experimental"
export default function PlansList() {
const { data, hasNextPage, fetchNext } = usePlans({ for: "user" })
return (
<ul>
{data?.map((plan) => (
<li key={plan.id}>
<h3>{plan.name}</h3>
<p>{plan.description}</p>
<p>
{plan.hasBaseFee ? (
<>
{plan.currency} {plan.amountFormatted} / month
</>
) : (
"Free"
)}
</p>
<ul>
{plan.features.map((feature) => (
<li key={feature.id}>{feature.name}</li>
))}
</ul>
</li>
))}
{hasNextPage && <button onClick={() => fetchNext()}>Load more</button>}
</ul>
)
}