Skip to main content
Docs

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

  • Name
    newSubscriptionRedirectUrl
    Type
    string
    Description

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

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 />
}
src/pricing.tsx
import { PricingTable } from '@clerk/clerk-react'

export default function PricingPage() {
  return <PricingTable />
}
pages/pricing.astro
---
import { PricingTable } from '@clerk/astro/components'
---

<PricingTable />
src/routes/pricing.tsx
import { PricingTable } from '@clerk/react-router'

export default function PricingPage() {
  return <PricingTable />
}
app/routes/pricing.tsx
import { PricingTable } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/pricing')({
  component: PricingTable,
})

function PricingPage() {
  return <PricingTable />
}
pricing.vue
<script setup lang="ts">
import { PricingTable } from '@clerk/vue'
</script>

<template>
  <PricingTable />
</template>

Usage with JavaScript

The following methods available on an instance of the Clerk class are used to render and control the <PricingTable /> component:

The following examples assume that you followed the quickstart to add Clerk to your JavaScript app.

mountPricingTable()

function mountPricingTable(node: HTMLDivElement, props?: PricingTableProps): void

mountPricingTable() params

  • Name
    node
    Type
    HTMLDivElement
    Description

    The container <div> element used to render in the <PricingTable /> component

  • Name
    props?
    Type
    PricingTableProps
    Description

    The properties to pass to the <PricingTable /> component

mountPricingTable() usage

main.js
import { Clerk } from '@clerk/clerk-js'

// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load()

document.getElementById('app').innerHTML = `
  <div id="pricing-table"></div>
`

const pricingTableDiv = document.getElementById('pricing-table')

clerk.mountPricingTable(pricingTableDiv)

unmountPricingTable()

function unmountPricingTable(node: HTMLDivElement): void

unmountPricingTable() params

  • Name
    node
    Type
    HTMLDivElement
    Description

    The container <div> element with a rendered <PricingTable /> component instance

unmountPricingTable() usage

main.js
import { Clerk } from '@clerk/clerk-js'

// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load()

document.getElementById('app').innerHTML = `
  <div id="pricing-table"></div>
`

const pricingTableDiv = document.getElementById('pricing-table')

clerk.mountPricingTable(pricingTableDiv)

// ...

clerk.unmountPricingTable(pricingTableDiv)

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on