āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/_partials/billing/create-an-organization-pricing-table ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
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, { for: 'organization' })
</If>
<If sdk="nextjs">
```tsx {{ filename: 'app/pricing/page.tsx' }}
import { PricingTable } from '@clerk/nextjs'
export default function PricingPage() {
return (
<div style={{ maxWidth: '800px', margin: '0 auto', padding: '0 1rem' }}>
<PricingTable for="organization" />
</div>
)
}
export default function PricingScreen() { return ( <div style={{ maxWidth: '800px', margin: '0 auto', padding: '0 1rem' }}> <PricingTable for="organization" /> </div> ) }
</If>
<If sdk="react-router">
```tsx {{ filename: 'app/routes/pricing.tsx' }}
import type { Route } from './+types/pricing'
import { PricingTable } from '@clerk/react-router'
export function meta({}: Route.MetaArgs) {
return [{ title: 'Pricing' }]
}
export default function PricingPage() {
return (
<div style={{ maxWidth: '800px', margin: '0 auto', padding: '0 1rem' }}>
<PricingTable for="organization" />
</div>
)
}
export default function PricingPage() { return ( <div style={{ maxWidth: '800px', margin: '0 auto', padding: '0 1rem' }}> <PricingTable for="organization" /> </div> ) }
</If>
<If sdk="tanstack-react-start">
```tsx {{ filename: 'app/routes/pricing.tsx' }}
import { PricingTable } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/')({
component: PricingPage,
})
function PricingPage() {
return (
<div style={{ maxWidth: '800px', margin: '0 auto', padding: '0 1rem' }}>
<PricingTable for="organization" />
</div>
)
}
import { PricingTable } from '@clerk/clerk-expo/web'
import { View } from 'react-native'
export default function PricingPage() {
return (
<View>
<PricingTable for="organization" />
</View>
)
}
<If sdk={["expressjs", "fastify", "js-backend"]}>
[!NOTE] To see an example of how to create a pricing table page, please select one of the frontend SDKs on the sidebar.
</If>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā