<SignedIn>

import '@/styles/globals.css'
import { ClerkProvider, RedirectToSignIn, SignedIn } from '@clerk/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignedIn>
        <div>You are signed in</div>
      </SignedIn>
      <p>This content is always visible.</p>
    </ClerkProvider>
  )
}

export default MyApp

import { SignedIn, ClerkProvider } from '@clerk/clerk-react'

// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Add your Clerk Publishable Key to the .env.local file')
}

function Page() {
  return (
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <SignedIn>
        <div>This content is visible only to signed in users.</div>
      </SignedIn>
      <p>This content is always visible.</p>
    </ClerkProvider>
  )
}

import { Routes, Route } from 'react-router'
import { ClerkProvider, SignedIn } from '@clerk/clerk-react'

// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Add your Clerk Publishable Key to the .env.local file')
}

function App() {
  return (
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <Routes>
        <Route path="/" element={<div>This page is publicly accessible.</div>} />
        <Route
          path="/private"
          element={
            <SignedIn>
              <div>This content is accessible only to signed in users.</div>
            </SignedIn>
          }
        />
      </Routes>
    </ClerkProvider>
  )
}

---
import { SignedIn } from '@clerk/astro/components'
---

<SignedIn>
  <div>You are signed in</div>
</SignedIn>
<p>This content is always visible.</p>

import { SignedIn } from '@clerk/clerk-expo'
import { Text, View } from 'react-native'

export default function Screen() {
  return (
    <View>
      <SignedIn>
        <Text>You are signed in</Text>
      </SignedIn>
      <Text>This content is always visible.</Text>
    </View>
  )
}

import { SignedIn, UserButton } from '@clerk/remix'

export default function Index() {
  return (
    <div>
      <SignedIn>
        <p>You are signed in</p>
      </SignedIn>
      <p>Always visible</p>
    </div>
  )
}

import { SignedIn } from '@clerk/tanstack-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Home,
})

function Home() {
  return (
    <div>
      <SignedIn>
        <p>You are signed in</p>
      </SignedIn>
      <p>Always visible</p>
    </div>
  )
}

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

<template>
  <SignedIn>
    <div>You are signed in</div>
  </SignedIn>
  <p>This content is always visible.</p>
</template>