Skip to main content
Docs

<PricingTable />

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:

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

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>

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on