<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 tofalse
.
- 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. Iftrue
, the pricing table will display a list of plans and features that organizations can subscribe to. Defaults tofalse
.
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.
import { PricingTable } from '@clerk/nextjs'
export default function Page() {
return <PricingTable />
}
import { PricingTable } from '@clerk/clerk-react'
export default function PricingPage() {
return <PricingTable />
}
---
import { PricingTable } from '@clerk/astro/components'
---
<PricingTable />
import { PricingTable } from '@clerk/react-router'
export default function PricingPage() {
return <PricingTable />
}
import { PricingTable } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/pricing')({
component: PricingTable,
})
function PricingPage() {
return <PricingTable />
}
<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
- 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
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)
function unmountPricingTable(node: HTMLDivElement): void
- Name
node
- Type
HTMLDivElement
- Description
The container
<div>
element with a rendered<PricingTable />
component instance
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
Last updated on