Prebuilt UI Components: SignIn, SignUp, and UserButton

Clerk provides a suite of prebuilt components that inject beautiful, fully-functional authentication flows into your application interface.

1. Auth Page Components

To build login and registration screens, embed the <SignIn /> and <SignUp /> components:

import { SignIn } from "@clerk/nextjs";

export default function LoginPage() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-50">
      <SignIn />
    </div>
  );
}

2. Navigational User Details Button

The <UserButton /> displays the active user profile photo. Clicking it opens a dropdown panel containing account settings, email setups, connected OAuth providers, and a Sign Out button:

import { UserButton } from "@clerk/nextjs";

export default function Header() {
  return (
    <header className="flex justify-between items-center p-4 border-b">
      <span>My SaaS Platform</span>
      {/* Renders the user menu or a login link */}
      <UserButton afterSignOutUrl="/" />
    </header>
  );
}

3. Conditional Auth Wrappers

Clerk provides wrapper components to show or hide segments of the page depending on the visitor auth status:

• <SignedIn />: Renders its children only when a user is logged in.
• <SignedOut />: Renders its children only when the session is empty.

import { SignedIn, SignedOut, SignInButton } from "@clerk/nextjs";

export default function BannerSection() {
  return (
    <div className="p-6 border rounded-2xl bg-white">
      <SignedIn>
        <p className="text-gray-900 font-semibold">Welcome back to your workspace!</p>
      </SignedIn>
      
      <SignedOut>
        <p className="text-gray-500">Sign in to sync your changes across platforms.</p>
        <SignInButton className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg text-sm" />
      </SignedOut>
    </div>
  );
}