Skip to main content
Docs
Dashboard

<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:

  • Name
    collapseFeatures
    Type
    boolean
    Description

    A boolean that indicates whether the features are collapsed. Requires layout to be set to 'default'. Defaults to false.

  • 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. If true, the pricing table will display a list of plans and features that organizations can subscribe to. Defaults to false.

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.

app/pricing/page.tsx
import { PricingTable } from '@clerk/nextjs'

export default function Page() {
  return <PricingTable />
}

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on