ProfileLayout

A full-page profile layout: sticky top bar with animated tabs, a fixed left rail with personal info, and a scrollable main column. The top bar gains frosted-glass styling and reveals the tab strip on scroll.

Layout zones

┌──────────────────────────────────────────────────────────────┐
│ [logo]         [tabs — revealed on scroll]       [actions]   │  sticky top bar
├─────────────┬────────────────────────────────────────────────┤
│             │ [TabStrip]              [cols toggle]          │  sticky
│  HeroRail   ├────────────────────────────────────────────────┤
│  sticky     │                                                │
│             │  active tab content                            │
│             │                                                │
└─────────────┴────────────────────────────────────────────────┘

The HeroRail and TabStrip both stick just below the top bar. Once the page scrolls far enough, the TabStrip hides and the top bar reveals its own tab strip with a slide-in animation.

Demo

Scroll inside the preview to see the sticky topbar and tab-reveal animation. Toggle to dark mode to see the frosted-glass topbar.

Avatar image

By default the HeroRail renders a monogram derived from profile.name. Pass profile.image to render an actual image instead — 1:1 aspect-ratio with object-cover, falling back to the monogram if the URL is omitted:

const profile: ProfileLayoutProfile = {
  name: 'MIT CSAIL',
  handle: 'mit-csail',
  kind: 'org',
  image: '/avatars/mit-csail.png',  // ← when set, an <img> replaces the monogram
  // …
}

Editable avatar

Pass profile.onAvatarChange to make the rail avatar interactive. Hovering reveals a "change avatar" scrim and clicking opens a built-in upload sheet (drag-and-drop, file picker, live preview, optional remove). The callback fires with the chosen File on save, or null when the user clicked the in-sheet "remove avatar" affordance before saving. It may return a Promise; the sheet keeps itself open with a spinner while it resolves, and surfaces a generic error if it rejects.

const profile: ProfileLayoutProfile = {
  // …
  image: avatarUrl,
  onAvatarChange: async (file) => {
    if (file === null) {
      await deleteAvatar()
      setAvatarUrl(null)
      return
    }
    const { picture } = await uploadAvatar(file)
    setAvatarUrl(picture)
  },
}

Editable name

profile.onEditClick adds a pencil button next to the name in the rail. The pencil only materialises on group-hover of the name row, matching the source design's restraint. The callback is fired-and-forgotten — the component does not own any edit dialog; the caller decides what happens next (typically a Dialog with its own validation, since profile-edit flows tend to be app-specific):

const profile: ProfileLayoutProfile = {
  // …
  onEditClick: () => setShowProfileSheet(true),
}

Name accessory slot

profile.nameAccessory is a render slot anchored to the right of the name row. The library stays content-agnostic — pass any React node (theme-toggle pill, status badge, settings shortcut, etc.). The slot stays visible regardless of hover so the accessory is always reachable without opening a menu.

const profile: ProfileLayoutProfile = {
  // …
  nameAccessory: <ThemeTogglePill value={theme} onChange={setTheme} />,
}

Controlled tabs

By default ProfileLayout manages its own active tab — pass defaultTab for the initial value and the layout takes it from there. For deep-linking, in-page navigation, or any case where the active tab needs to live in external state, switch to controlled mode by passing tab + onTabChange together:

function MyProfilePage() {
  const [tab, setTab] = useState('overview')

  return (
    <ProfileLayout
      profile={profile}
      tabs={tabs}
      tab={tab}
      onTabChange={setTab}
    />
  )
}

tab wins when both tab and defaultTab are present.

Props

ProfileLayoutProfile

ProfileLayoutTab

TOPBAR_H_SMALL is exported alongside ProfileLayout — use it to position sticky elements in a tab's render output relative to the collapsed top bar.

ProfileLayoutFact

ProfileLayoutMember