Enterprise-ready, before enterprise asks
Build multi-tenant B2B products faster. Give your customers the organization workflows they expect — invitations, RBAC, and SSO — through simple, drop-in components.
Quickly onboard entire organizations
Enable users to set up organizations, invite members, and assign roles in one flow.
Onboarding built to convert
Let users easily set up their organization.
Invite without friction
Invite users manually or auto-recognize them by email — no one-off invites required.
One user. Multiple teams.
Users can join multiple organizations and switch between them instantly and securely.
Land fast. Expand faster.
Launch with invitations and custom permissions. Expand to SSO and advanced roles - no rebuild required.
Ship Organizations quickly
Easily implement drop-in components that will help you grow from day one.
Make onboarding frictionless
Let users join a team through a built-in, one-click invite flow.
Expand with automatic invites
Invite or suggest users based on verified email domains automatically.
Define permission logic with RBAC
Control who can access specific resources and perform certain actions with permissions, roles, and role sets.
Support SSO providers
Deliver secure, easy access to every organization with enterprise-grade SSO using protocols like SAML and OIDC.
Billing built for B2B SaaS
With Clerk Billing, charge organizations as teams adopt your product and turn usage into predictable revenue — no custom logic required.
Organization
Manage your organization
General
Members
Billing
API keys
Billing
Subscription
Payment methods
Turn insights into revenue
Understand where expansion is happening. Track member adoption, understand activity patterns, and catch churn early to grow ARR.
Get Started
User infrastructure that helps you grow
Skip the boilerplate and stay in control. Fields, redirects, UI, and UX as flexible as you want.
import '@/styles/globals.css'
import {
ClerkProvider,
SignInButton,
SignUpButton,
Show,
UserButton
} from '@clerk/nextjs'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return (
<ClerkProvider
{...pageProps}
appearance={{
cssLayerName: 'clerk',
}}
>
<header className="flex justify-end items-center p-4 gap-4 h-16">
<Show when="signed-out">
<SignInButton />
<SignUpButton>
<button className="bg-[#6c47ff] text-white rounded-full font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 cursor-pointer">
Sign Up
</button>
</SignUpButton>
</Show>
<Show when="signed-in">
<UserButton />
</Show>
</header>
<Component {...pageProps} />
</ClerkProvider>
)
}
export default MyAppimport './App.css'
import {
Show,
SignInButton,
SignUpButton,
UserButton
} from '@clerk/react'
function App() {
return (
<>
<header>
{/* Show the sign-in and sign-up buttons when the user is signed out */}
<Show when="signed-out">
<SignInButton />
<SignUpButton />
</Show>
{/* Show the user button when the user is signed in */}
<Show when="signed-in">
<UserButton />
</Show>
</header>
</>
)
}
export default Appimport {
ClerkProvider,
Show,
UserButton,
SignInButton,
SignUpButton,
} from '@clerk/react-router'
// Pull in the 'loaderData' from the 'rootAuthLoader()' function
export default function App({ loaderData }: Route.ComponentProps) {
return (
// Pass the 'loaderData' to the '<ClerkProvider>' component
<ClerkProvider loaderData={loaderData}>
<header className="flex items-center justify-center py-8 px-4">
{/* Show the sign-in and sign-up buttons when the user is signed out */}
<Show when="signed-out">
<SignInButton />
<SignUpButton />
</Show>
{/* Show the user button when the user is signed in */}
<Show when="signed-in">
<UserButton />
</Show>
</header>
<Outlet />
</ClerkProvider>
)
}---
import {
Show,
UserButton,
SignInButton,
SignUpButton,
} from '@clerk/astro/components'
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>Astro Basics</title>
</head>
<body>
<header>
{/* Show the sign-in and sign-up buttons when the user is signed out */}
<Show when="signed-out">
<SignInButton mode="modal" />
<SignUpButton mode="modal" />
</Show>
{/* Show the user button when the user is signed in */}
<Show when="signed-in">
<UserButton />
</Show>
</header>
<slot />
</body>
</html>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
</style><script setup lang="ts">
// Components are automatically imported
</script>
<template>
<header>
<!-- Show the sign-in and sign-up buttons when the user is signed out -->
<Show when="signed-out">
<SignInButton />
<SignUpButton />
</Show>
<!-- Show the user button when the user is signed in -->
<Show when="signed-in">
<UserButton />
</Show>
</header>
<main>
<NuxtPage />
</main>
</template>Drop-in UI Components
Integrate fully-built organization components.
Build your own UI
Take full control of your authentication UI using custom flows.
Framework-native middleware
Next.js / Remix middleware that injects org context into every request.
Scalable authentication
for B2B SaaS
The easy solution to multi-tenancy with a full suite of B2B SaaS features. Pay only for active organizations.
Available features:
Enhanced add-on
Features you’ll have
Start now, no strings attached
Integrate complete organization management in minutes. Free for your first 100 monthly active orgs, and you're never charged for orgs with inactive members.