Properties
Usage with frameworks
Usage with JavaScript
1. mountPricingTable()
2. unmountPricingTable()

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

Next.js

React

Astro

React Router

Tanstack React Start

Vue

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:

mountPricingTable()
unmountPricingTable()

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)

Edit this page on GitHub

<PricingTable />

Feedback

`<PricingTable />`