Skip to main content

<PricingTable />

Theme
Theme Editor

The <PricingTable /> component displays a table of Plans and Features that users can subscribe to.

Usage

The following example includes a basic implementation of the <PricingTable /> component. You can use this as a starting point for your own implementation.

src/routes/pricing.tsx
import { PricingTable } from '@clerk/chrome-extension'

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

<PricingTable /> supports customizing the appearance of the checkout drawer it opens. Use the top-level appearance prop to customize <PricingTable />, and pass appearance through checkoutProps to customize the checkout drawer.

<PricingTable
  appearance={{
    variables: {
      colorPrimary: '#6c47ff',
    },
  }}
  checkoutProps={{
    appearance: {
      variables: {
        colorPrimary: '#0f766e',
      },
    },
  }}
/>

Properties

All props are optional.

  • Name
    appearance?
    Type
    Appearance | undefined
    Description

    An 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 drawer. 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 element to be rendered while the component is mounting.

  • Name
    for?
    Type
    'user' | 'organization'
    Description

    A string that indicates whether the pricing table is for users or Organizations. If 'user', the pricing table will display a list of Plans and Features that users can subscribe to. If 'organization', the pricing table will display a list of Plans and Features that Organizations can subscribe to. Defaults to 'user'.

  • Name
    highlightedPlan?
    Type
    string
    Description

    The slug of the Plan to highlight. When set, the matching Plan card will display a "Popular" badge. If the Plan already has an active Subscription badge, the Subscription badge takes priority.

  • Name
    newSubscriptionRedirectUrl?
    Type
    string
    Description

    The URL to navigate to after the user completes the checkout and selects the "Continue" button.

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub