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).
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.

Theming

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

TypeScript

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