User Profile

Displays the current user's profile with avatar, name, email, and logout.

Preview · User Profile

Code

HTML · @primus/ui-core

<div class="card" style="max-width:240px;padding:1.25rem;text-align:center">
  <div style="width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--primary) 15%,transparent);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem;font-size:1.1rem;font-weight:600;color:var(--primary)">JD</div>
  <p style="margin:0 0 0.2rem;font-weight:600;font-size:0.9rem">Jane Doe</p>
  <p style="margin:0 0 0.75rem;font-size:0.775rem;color:var(--muted-foreground)">jane@acme.com</p>
  <span class="badge accent">Enterprise</span>
  <div style="margin-top:1rem;padding-top:0.75rem;border-top:1px solid var(--border)">
    <button class="ghost small" style="width:100%">Sign out</button>
  </div>
</div>

React

import { PrimusUserProfile } from '@/components/ui/primus-user-profile';

<PrimusUserProfile
  user={{
    id: 'u1',
    email: 'jane@acme.com',
    firstName: 'Jane',
    lastName: 'Doe',
    phone: '+1 555 0100',
    timezone: 'America/New_York',
  }}
  onSave={(data) => console.log('Saved', data)}
/>

Angular

<primus-user-profile [user]="currentUser" [showLogout]="true"
  [useService]="true" (loggedOut)="onLoggedOut()">
</primus-user-profile>

Props

Prop	Type	Default	Description
user	UserProfile	required	User data to display and edit
onSave	(data: Partial<UserProfile>) => void	—	Called when the user saves changes
onAvatarChange	(file: File) => void	—	Called when a new avatar is uploaded

TypeScript interfaces

interface UserProfile {
  id:        string;
  email:     string;
  firstName: string;
  lastName:  string;
  phone?:    string;
  avatar?:   string;   // URL
  timezone?: string;
  language?: string;
}

Version history

See the Changelog for version history and breaking changes.