<PricingTable />
The <PricingTable />
component displays a table of Plans and Features that users can subscribe to.
Properties
- Name
appearance
- Type
Appearance | undefined
- Description
Optional object to style your components. Will only affect Clerk components and not Account Portal pages.
- Name
checkoutProps
- Type
{ appearance: Appearance }
- Description
Options for the checkout popup. Accepts the following properties:
appearance
: an object used to style your components. Will only affect Clerk components and not Account Portal pages.
- Name
collapseFeatures
- Type
boolean
- Description
A boolean that indicates whether the features are collapsed. Requires
layout
to be set to'default'
. Defaults tofalse
.
- Name
ctaPosition
- Type
'top' | 'bottom'
- Description
The placement of the CTA button. Requires
layout
to be set to'default'
. Defaults to'bottom'
.
- Name
fallback?
- Type
JSX
- Description
An optional UI to show when the pricing table is loading.
- Name
forOrganizations
- Type
boolean
- Description
A boolean that indicates whether the pricing table is for organizations. If
false
, the pricing table will display a list of plans and features that users can subscribe to. Iftrue
, the pricing table will display a list of plans and features that organizations can subscribe to. Defaults tofalse
.
Usage with frameworks
The following example includes a basic implementation of the <PricingTable />
component. You can use this as a starting point for your own implementation.
import { PricingTable } from '@clerk/nextjs'
export default function Page() {
return <PricingTable />
}
Feedback
Last updated on