āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/_partials/billing/checking-plan-using-protect ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
export default function ProtectedContentPage() { return ( <Protect plan="bronze" fallback={<p>Only subscribers to the Bronze plan can access this content.</p>} > <h1>Exclusive Bronze Content</h1> <p>This content is only visible to Bronze subscribers.</p> </Protect> ) }
</If>
<If sdk="nuxt">
```vue {{ filename: 'pages/protected-content.vue' }}
<script setup lang="ts">
// Components are automatically imported
</script>
<template>
<main>
<Protect plan="bronze" fallback="Only subscribers to the Bronze plan can access this content.">
<h1>Exclusive Bronze Content</h1>
<p>This content is only visible to Bronze subscribers.</p>
</Protect>
</main>
</template>
export default function ProtectedContentPage() { return ( <Protect plan="bronze" fallback={<p>Only subscribers to the Bronze plan can access this content.</p>} > <h1>Exclusive Bronze Content</h1> <p>This content is only visible to Bronze subscribers.</p> </Protect> ) }
</If>
<If sdk="react-router">
```tsx {{ filename: 'app/routes/protected-content.tsx' }}
import type { Route } from './+types/protected-content'
import { Protect } from '@clerk/react-router'
export function meta({}: Route.MetaArgs) {
return [{ title: 'Protected Content' }]
}
export default function ProtectedContentPage() {
return (
<Protect
plan="bronze"
fallback={<p>Only subscribers to the Bronze plan can access this content.</p>}
>
<h1>Exclusive Bronze Content</h1>
<p>This content is only visible to Bronze subscribers.</p>
</Protect>
)
}
export default function ProtectedContentPage() { return ( <Protect plan="bronze" fallback={<p>Only subscribers to the Bronze plan can access this content.</p>} > <h1>Exclusive Bronze Content</h1> <p>This content is only visible to Bronze subscribers.</p> </Protect> ) }
</If>
<If sdk="tanstack-react-start">
```tsx {{ filename: 'app/routes/protected-content.tsx' }}
import { Protect } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/protected-content')({
component: ProtectedContentPage,
})
function ProtectedContentPage() {
return (
<Protect
plan="bronze"
fallback={<p>Only subscribers to the Bronze plan can access this content.</p>}
>
<h1>Exclusive Bronze Content</h1>
<p>This content is only visible to Bronze subscribers.</p>
</Protect>
)
}
export default function ProtectedContentPage() { return ( <Protect plan="bronze" fallback={<Text>Only subscribers to the Bronze plan can access this content.</Text>} > <Text>Exclusive Bronze Content</Text> <Text>This content is only visible to Bronze subscribers.</Text> </Protect> ) }
</If>
<If sdk={["expressjs", "fastify", "js-backend"]}>
> [!NOTE]
> To see an example of how to use the `Protect` component, please select one of the frontend SDKs on the sidebar.
</If>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā