Profile page
ProA user profile with cover, bio, stats, activity and project tabs, and an edit sheet that writes back into the page.
Live block · sample data
- A person's own profile with an edit flow
- Public creator or member pages inside an app
- Team member pages that show recent work
- Account security or billing settings, use settings-page
- A directory of many people, use team-directory
- A marketing team section, use team-showcase
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this for member or creator profiles. Load the profile, stats, activity, and projects from your API, save edits through onSave, and persist stars through onStarChange; saving in the preview is simulated.
example.tsx
import { ProfilePage } from "@/components/arc/blocks/profile-page/profile-page"; export function Profile({ user, activity, projects }) { return ( <ProfilePage profile={user} activity={activity} projects={projects} onSave={async next => { const res = await fetch("/api/me", { method: "PATCH", body: JSON.stringify(next) }); if (!res.ok) throw new Error("Could not save your profile."); }} /> );}ProfilePage
A full profile screen: cover photo, overlapping avatar, name and headline, an about column with bio, links, and stats, and Activity and Projects tabs. Edit profile slides a sheet in from the right edge; saving writes the changes back into the page and briefly highlights every field that changed.
PropTypeDefaultDescription
profileProfileDetailssample profileName, handle, headline, location, website, bio, avatar and cover image paths, and the joined label.statsProfileStat[]sample statsUp to three counts shown under the bio, each with an id, label, and value.activityProfileActivity[]sample activityActivity items with a kind (shipped, commented, created, reviewed, starred), action text, target, optional detail, time, and a group heading such as This week.projectsProfileProject[]sample projectsProject cards with a cover image, description, visibility, collaborators, updated label, and star count.tab"activity" | "projects"–Controlled tab. Pair with onTabChange.defaultTab"activity" | "projects""activity"Tab shown on mount when uncontrolled.onTabChange(tab: ProfileTab) => void–Called when the tab changes.onSave(profile: ProfileDetails) => void | Promise<void>–Persists edited details. Throw an Error to keep the sheet open and show its message. Without it the preview simulates a save.onStarChange(projectId: string, starred: boolean) => void–Called when a project star is toggled.profileUrlstring"https://northwind.app/@<handle>"Public link copied by Share.editablebooleantrueShows Edit profile. Set false when someone views another person's profile.classNamestring–Extra class on the root.- Tab
- Moves through Share, Edit profile, links, tabs, and project stars.
- Arrow leftorArrow right
- Switch between the Activity and Projects tabs.
- Escape
- Closes the edit sheet without saving and returns focus to Edit profile.
- Enter
- Saves the edit sheet from any single line field.
- Tabs use tablist, tab, and tabpanel roles with roving tab index and aria-controls.
- The edit sheet is a modal dialog with a labelled title; focus moves to the first field, stays inside while open, and returns to Edit profile on close.
- Validation errors are tied to their inputs with aria-describedby and aria-invalid; save errors use role alert.
- Star buttons expose aria-pressed and name the project and count. Share keeps its width while its label changes to Copied or Failed.
- The tab underline travels between tabs on the morph spring; tab content fades up 6px.
- The edit sheet slides from the right edge on the smooth spring over a fading scrim, and leaves the same way faster.
- Saved fields glow once with the accent tint, and a new star pops with a small spring.
- Reduced motion swaps the slide for a fade, keeps the highlight, and removes travel.
- Below 760px the about column stacks above the tabs; below 560px project cards go to one column.
- The cover shortens and the avatar shrinks on narrow screens; the edit sheet becomes full width.
- The screen height is min(760px, 100dvh) and the page scrolls inside it.
- Only transform and opacity animate; images are lazy except the cover.
- The edit sheet mounts only while open.
- Activity and projects render as plain lists; paginate beyond a few hundred items.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose this for a member, creator, or teammate profile inside a product. It is a full screen: the page scrolls inside the block so the sheet always covers the visible area.
- Load all data from your API and pass it in; the block owns only the edit draft and local star state.
- Set editable={false} for other people's profiles and replace the actions with Follow or Message in your own fork.
- Covers and avatars render with next/image; pass paths your image config allows.
The full library index for assistants is at /llms.txt.
