`<PricingTable />`

Properties
Usage with frameworks

Available in other SDKs

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

Properties

All props are optional.

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:

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

Next.js

React

Astro

Expo

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

Note

This component can be used in Expo Web projects, but won't work in native environments (iOS or Android). For native apps, use the supported native components instead.

/app/pricing.web.tsx

import { PricingTable } from '@clerk/clerk-expo/web'

export default function PricingPage() {
  return <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: PricingPage,
})

function PricingPage() {
  return <PricingTable />
}

pricing.vue

<script setup lang="ts">
import { PricingTable } from '@clerk/vue'
</script>

<template>
  <PricingTable />
</template>

Edit on GitHub

Last updated on Aug 22, 2025

<PricingTable />

Properties

Usage with frameworks

Feedback

`<PricingTable />`