One price doesn’t fit all

<PricingTable /> enables flexible pricing and seat based billing in one drop-in component.

Build with agents

Or view docs

Billing cycle

Set monthly or annual payments

Users choose their preferred option at checkout.

Feature display

List features per plan

Users see exactly what’s included before they subscribe.

Billing options

Add seat based billing

Seat based billing can be included in your plans without building the logic yourself.

Flexible CTA

Set your free trial length

When a user checks out, the trial length is passed directly to <CheckoutButton /> automatically.

Customization

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

Pro

$100/ month

Billed annually

Unlimited members
Scale without thinking
More usage + control
Customize branding
MFA included

Pro

$100/ month

Billed annually

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.

Get started today

Clerk API

Custom flows

Want full control over your onboarding experience? Our headless APIs give you the flexibility to build exactly what you need.

View documentation

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>
  )
}