B2C subscriptions
A public SaaS pricing page compares individual-user plans and lets visitors start checkout.
Clerk · Component
PricingTable
PricingTable renders Clerk Plans and Features in a subscription table. Users or organizations can choose a plan and continue through Clerk checkout.
How it works
Render PricingTable to show subscription plans and their included features. Users can select a plan and proceed through Clerk’s checkout drawer; the component also supports separate styling for the table and checkout experience.
Syntax
<PricingTable />Parameters
| Name | Type | Description |
|---|---|---|
for | 'user' | 'organization' | Controls whether the table targets users or Organizations; defaults to 'user'. |
appearance | Appearance | Styles Clerk components in the table. |
checkoutProps | object | Options for the checkout drawer, including its appearance configuration. |
highlightedPlan | string | Plan slug whose card receives a Popular badge. |
checkoutProps.redirectUrl | string | URL used after checkout completion when the user selects Continue. |
Returns
A rendered Clerk pricing table containing configurable plan and feature cards plus checkout interaction.
Key points
- It provides a ready-made subscription-plan comparison UI with each plan’s included features.
- Use the top-level appearance prop to style the pricing table’s Clerk UI.
- Provide appearance inside checkoutProps when the checkout drawer needs different styling.
- The for prop determines whether the displayed subscription audience is individual users or organizations.
- If for is omitted, the component targets user subscriptions.
- Use a plan slug to identify the card that should receive the Popular badge.
Common mistakes
- A highlighted plan may show its active-subscription badge instead of the Popular badge.
Example: Basic pricing table
import { PricingTable } from '@clerk/react'
export default function PricingPage() {
return <PricingTable />
}Render the component on a pricing page after configuring plans in Clerk.
When to use it
Organization billing
A B2B application presents organization plans with seat-based or team-oriented billing.
Drop-in billing UI
A product needs Clerk-managed checkout without building plan-card and checkout orchestration from scratch.
Interview questions
QWhat does the PricingTable component provide?
PricingTable displays a table of Plans and Features that users can subscribe to. A basic React implementation imports it from @clerk/react and renders <PricingTable />.
Follow-up: How would you style checkout independently from the table? Pass the styling configuration at the top level for the table, and pass it through checkoutProps for the checkout drawer.
QHow do you show organization plans?
The for prop selects the audience for the plans. Its default is user; organization makes the table show plans and features that Organizations can subscribe to.
Follow-up: What should be checked when using the organization mode? Ensure the displayed plans are configured as Organization Plans in Clerk billing.
QHow do you highlight a popular plan?
Set the highlightedPlan prop to a Plan slug to mark its matching card with a Popular badge. If that plan has an active subscription, the subscription badge takes precedence.
Follow-up: What happens when no matching slug exists? No plan card is highlighted because the component can only match a configured Plan by its slug.
Related
CheckoutButtonOrganizationProfileUserProfilePlansFeaturesappearancecheckoutProps