āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/components/billing/pricing-table ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
title: '<PricingTable />'
description: Clerk's <PricingTable /> component displays a table of Plans and Features that users can subscribe to.
sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
The <PricingTable /> component displays a table of Plans and Features that users can subscribe to.
<If sdk={["astro", "chrome-extension", "expo", "nextjs", "nuxt", "react", "react-router", "remix", "tanstack-react-start", "vue"]}
Example
The following example includes a basic implementation of the <PricingTable /> component. You can use this as a starting point for your own implementation.
export default function Page() {
return <PricingTable />
}
```
function App() {
return <PricingTable />
}
export default App
```
<PricingTable />
```
```jsx {{ filename: '/app/pricing.web.tsx' }}
import { PricingTable } from '@clerk/clerk-expo/web'
export default function PricingPage() {
return <PricingTable />
}
```
export default function PricingPage() {
return <PricingTable />
}
```
export default function PricingPage() {
return <PricingTable />
}
```
export default function PricingPage() {
return <PricingTable />
}
```
export const Route = createFileRoute('/pricing')({
component: PricingPage,
})
function PricingPage() {
return <PricingTable />
}
```
<template>
<PricingTable />
</template>
```
<template>
<PricingTable />
</template>
```
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
<Properties>
- `node`
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
The container `<div>` element used to render in the `<PricingTable />` component
---
- `props?`
- [`PricingTableProps`](#properties)
The properties to pass to the `<PricingTable />` component
mountPricingTable() usage
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
<Properties>
- `node`
- [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
The container `<div>` element with a rendered `<PricingTable />` component instance
unmountPricingTable() usage
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)
Properties
All props are optional.
<Properties> - `appearance` - <code>[Appearance](/docs/guides/customizing-clerk/appearance-prop/overview) | undefined</code>Optional object to style your components. Will only affect Clerk components and not Account Portal pages.
checkoutProps{ appearance: Appearance }
Options for the checkout drawer. Accepts the following properties:
appearance: an object used to style your components. Will only affect Clerk components and not Account Portal pages.
collapseFeaturesboolean
A boolean that indicates whether the features are collapsed. Requires layout to be set to 'default'. Defaults to false.
ctaPosition'top' | 'bottom'
The placement of the CTA button. Requires layout to be set to 'default'. Defaults to 'bottom'.
fallbackJSX
An optional UI to show when the pricing table is loading.
for'user' | 'organization'
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'.
newSubscriptionRedirectUrlstring
The URL to navigate to after the user completes the checkout and selects the "Continue" button. </Properties>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā