Components Overview
The Torii React SDK ships a layered component surface. Most apps only ever touch the drop-in components and a couple of control components; the rest are there when you outgrow the defaults.
Everything is read off <ToriiProvider> context (API base URL,
publishable key, OAuth providers, labels, theme), so individual
components stay prop-light. Every component must be rendered inside a
<ToriiProvider>.
Drop-in components
Section titled “Drop-in components”Prebuilt, fully styled surfaces. Reach for these first.
| Component | What it is |
|---|---|
<SignIn> |
Self-contained auth card: sign-in, sign-up, and forgot-password with footer links. |
<SignUp> |
Registration card; the sign-up counterpart to <SignIn>. |
<InvitationSignUp> |
Ticket-based invitation signup card. |
<AcceptInvitation> |
Invitation accept landing: signs a new invitee up + auto-joins, or accepts for a signed-in user. |
<UserButton> |
Avatar/initials trigger with a dropdown for profile + sign-out. |
<OrganizationList> |
B2B active-organization picker that lists the user’s orgs, switches the active one, offers create. |
<OrganizationSwitcher> |
Nav-dropdown active-org switcher. |
<OrganizationProfile> |
Tabbed self-service org card: rename (General), members + roles, and share-link invitations. |
<CreateOrganization> |
Standalone create-organization form card. |
<OrganizationRequired> |
Membership gate: renders the org picker until the signed-in user has an active org. |
<UserDashboard> |
Account page shell: header with <UserButton> plus the full <UserProfile>. |
<UserProfile> |
Sectioned account widget: profile, security, privacy, preferences. |
<PoweredBy> is a props-less brand footer that renders implicitly under
the auth cards; you don’t mount it yourself. Its visibility is controlled
by your tier and the appearance.hideFooter flag.
Control components
Section titled “Control components”Conditionally render based on the auth lifecycle. They render
null (or a fallback) rather than a visible surface. See
control components.
| Component | Renders children when… |
|---|---|
<SignedIn> |
Signed in and the session has no pending gates. |
<SignedOut> |
Signed out (or a session gate is pending). |
<AuthLoading> |
The initial session probe is still in flight. |
<Show> |
Signed-in gate; optionally gates on a role/permission via when. |
<RedirectToSignIn> |
Signed out, navigates to your sign-in page. |
<RedirectToGates> |
A session gate is pending, routes to the configured gate URL. |
Runtime status
Section titled “Runtime status”Gate on the runtime load lifecycle (the CDN/bundled UI bundle + its stylesheet), distinct from the auth lifecycle above. See runtime status.
| Component | Renders children when… |
|---|---|
<ToriiLoading> |
The SDK runtime is still loading. |
<ToriiLoaded> |
The runtime has loaded and styles are injected. |
<ToriiFailed> |
The runtime failed to load (with error + retry). |
<RuntimeOutdatedPrompt> |
The loaded runtime is outdated, the default outdated-runtime banner. |
Low-level forms
Section titled “Low-level forms”The headless path: bare forms with no card chrome, for fully custom layouts. See low-level forms.
| Component | What it is |
|---|---|
<LoginForm> |
Bare two-step email/password sign-in form. |
<SignupForm> |
Bare registration form (legal-consent aware). |
<ForgotPasswordForm> |
Bare multi-step password-reset form. |
Account widgets
Section titled “Account widgets”Self-service account surfaces you can compose individually instead of
using the all-in-one <UserProfile>. See
account widgets.
| Component | What it is |
|---|---|
<ConnectedAccounts> |
Linked OAuth identities with link/unlink controls. |
<DataRequest> |
GDPR subject-access request button + status. |
<LanguageSelector> |
Standalone language-picker dropdown. |
<ForgotPassword> |
Drop-in forgot-password card (heading + form + back link). |
Theming
Section titled “Theming”Every visual component honours the appearance prop on
<ToriiProvider> (theme preset, token variables, per-slot
elements). See theming and
elements.