User & content

User Profile Page

A user profile block with a cover banner, avatar, bio, location/website/email meta, a stats row, and tabbed content sections. Actions slot accepts any buttons.

Alice Johnson

Member

@alicejohnson

Frontend engineer building open-source tools for the modern web. Previously at Vercel and Linear.

San Francisco, CAalicejohnson.dev alice@example.comJoined January 2024

Projects

340

Followers

Following

Projects will appear here.

import { UserProfilePage } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add user-profile-page

Import

import.tsx

import { UserProfilePage } from "@aetherstack/blocks"

Usage

user-profile-page.tsx

import { UserProfilePage } from "@aetherstack/blocks"
import { Button } from "@aetherstack/ui"

export default function ProfilePage() {
  return (
    <UserProfilePage
      user={{
        name: "Alice Johnson",
        username: "alicejohnson",
        email: "alice@example.com",
        bio: "Frontend engineer building open-source tools.",
        role: "Member",
        location: "San Francisco, CA",
        joinedAt: "January 2024",
      }}
      stats={[
        { label: "Projects", value: 12 },
        { label: "Followers", value: 340 },
        { label: "Following", value: 91 },
      ]}
      tabs={[
        { label: "Projects", content: <div>Projects content</div> },
        { label: "Activity", content: <div>Activity content</div> },
      ]}
      actions={<Button variant="outline" size="sm">Edit profile</Button>}
    />
  )
}

Props

Prop	Type	Default	Description
user*	UserProfileUser	—	User data. Fields: name, username, email, bio, avatarUrl, role, location, website, joinedAt.
stats	{ label: string; value: string \| number }[]	—	Stat items displayed in the stats row.
tabs	{ label: string; content: ReactNode }[]	—	Tab sections below the stats row.
actions	ReactNode	—	Action buttons rendered to the right of the avatar.
className	string	—	Additional classes on the root element.

* Required

Accessibility

→Avatar image includes alt set to the user name.
→Website and email links are properly labelled anchor elements.
→Tabs use the Radix UI Tabs primitive — keyboard-navigable.