UserDashboard

<UserDashboard> is a ready-made account page. It wraps <UserProfile> in a titled header that also embeds a <UserButton>, so a single component gives you a complete “My account” screen.

When to use

Use it when you want a finished account page with one component. If you only need the sectioned editor without the page chrome, use <UserProfile> directly.

Usage

import { SignedIn, UserDashboard } from '@torii-js/torii-react';

function AccountPage() {
  return (
    <SignedIn>
      <UserDashboard title="My account" />
    </SignedIn>
  );
}

Props

Prop	Type	Description
title	string	Dashboard heading. Defaults to the localised “Account” label.
onUpdateSuccess	(profile: UserProfileData) => void	Fired after a successful profile update, with the full updated profile.
onUpdateError	(error: ToriiError) => void	Fired on a profile-update error; branch on error.code, show error.message.
labels	Partial<ToriiSignupLabels>	Per-instance label overrides. Falls through to ToriiProvider labels.
showLanguage	boolean	Whether the inline profile shows the Language row. Defaults to auto (shown when <ToriiProvider> has more than one language configured).
appearancePreference	'light' | 'dark' | 'system'	Forwarded to the inline profile. Together with onAppearancePreferenceChange, adds the Preferences section with an Appearance selector. See <UserProfile>.
onAppearancePreferenceChange	(value) => void	Forwarded alongside appearancePreference.
className	string	Extra class names for the dashboard wrapper.

Behaviour

• Requires a provider: render inside <SignedIn> within <ToriiProvider>.
• Composition: the header hosts the title and a <UserButton> (in navigation mode, just avatar + sign-out, since the profile is already inline); the body is a <UserProfile>. Profile-update callbacks bubble up from the embedded card. Language switching lives in the profile’s Language row on the Profile section, shown when the provider has more than one languages entry.
• Appearance: pass appearancePreference + onAppearancePreferenceChange and they reach the inline profile’s Preferences section unchanged, so the drop-in dashboard covers light/dark without being decomposed. Applying the value is still your app’s job; see applying the appearance preference.

Theming

Honours the appearance prop on <ToriiProvider>. See theming and elements.

TypeScript

import type { UserDashboardProps } from '@torii-js/torii-react';