<SignedOut>

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

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignedOut>
        <div>You are signed Out</div>
      </SignedOut>
      <div>Always visible</div>
    </ClerkProvider>
  )
}

export default MyApp

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

function Page() {
  return (
    <ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <section>
        <div>This content is always visible.</div>
        <SignedOut>
          <div>This content is visible only to signed out users.</div>
        </SignedOut>
      </section>
    </ClerkProvider>
  )
}

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

function App() {
  return (
    <ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <Routes>
        <Route path="/" element={<div>This page is publicly accessible.</div>} />
        <Route
          path="/public"
          element={
            <SignedOut>
              <div>This content is accessible only to users that are signed out.</div>
            </SignedOut>
          }
        />
      </Routes>
    </ClerkProvider>
  )
}

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

export default function Index() {
  return (
    <div>
      <SignedIn>
        <h1>Index route</h1>
        <p>You are signed in!</p>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <p> You are signed out </p>
      </SignedOut>
    </div>
  )
}

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

<SignedOut>
  <div>You are signed out</div>
</SignedOut>
<div>Always visible</div>

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

<template>
  <SignedOut>
    <div>You are signed out</div>
  </SignedOut>
  <div>Always visible</div>
</template>