Profile page

Code

<ProfilePage profile={profile} blogHref="/blog" postHref={(p) => `/blog/${p.slug}`} onContact={openForm} />

Website · beta

Live examples and controls: Profile page in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/profile-page.json

A page about a person, in two columns. The identity column holds the avatar, name, @handle, headline, location, availability and links, one full-width action, the bio and the join date, with personal widgets below it (local clock, weather, numbers, now). The content column holds your own sections first, then about, experience (with an overlap-aware total), grouped skills, projects (a featured story, then a grid with category tabs), latest writing and testimonials. Sections that list things show a count. Sections without data are left out.

The columns sit side by side from 64rem of container width. On narrower containers the identity comes first and the widgets last.

Owner view. Pass onEdit or editHref when the member is looking at their own page. "Edit profile" replaces the contact button, the closing call to action is left out, and two private sections appear: Apps (the products they use, with the official mark, plan, role, organisation and last use) and Account (email, language, time zone, member since, whatever details you pass). A member with no apps sees an empty state with one "Browse apps" action, never an empty grid.

When to useCopy Anchor Link

• A portfolio, a personal site or a team-member page.

When not to useCopy Anchor Link

• An in-app user card: use ProfileCard.
• A company landing page: use the marketing blocks.

ImportCopy Anchor Link

import { ProfilePage } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

<ProfilePage profile={profile} blogHref="/blog" postHref={(p) => `/blog/${p.slug}`} onContact={openForm} />

The owner's view of the same page:

<ProfilePage
  profile={profile}
  editHref="/settings/profile"
  apps={[{ id: "mahaam", name: "Mahaam", icon: mahaamMark, href: "https://mahaam.app", plan: "Pro", role: "Owner", org: "3x1", lastUsed: "2026-09-28" }]}
  appsHref="/apps"
  account={[
    { label: "Email", value: "[email protected]" },
    { label: "Member since", value: "March 2024" },
  ]}
/>

AnatomyCopy Anchor Link

ProfilePage           data-slot="profile-page"
├─ ProfileSidebar     Avatar, name, @handle, headline, details, one action, SocialLinks, bio, joined
├─ content column     children, ProfileApps*, ProfileAccount*, ProfileAbout, ProfileExperience,
│                     ProfileSkills, ProfileProjects, ProfileWriting, ProfileTestimonials
├─ aside              LocalClock, WeatherWidget, StatsWidget, NowWidget (under the sidebar)
└─ ProfileContact     visitors only
                      * owner only

APICopy Anchor Link

ProfilePageCopy Anchor Link

ProfileData fields: name, handle, headline, bio, joined (ISO date), avatar, location, timeZone, workingHours, availability (open, limited, closed), availabilityNote, about (Markdown), email, links, experience (ProfileJob[]), skills, projects (ProfileProject[]), posts, testimonials, stats, now, nowUpdated, weather, cvHref.

SectionsCopy Anchor Link

ProfileSection takes title, description, action and count (shown as a badge beside the title). ProfileApp is a Product (from product switcher) plus role, org, plan and lastUsed. ProfileAccountDetail is { label, value }.

ProfileSidebar (the identity column; takes profile, onContact, onEdit, editHref, action to replace the button, and children below the bio), ProfileApps (apps, browseHref), ProfileAccount (details, description), ProfileHero (the older single-column header), ProfileSection, ProfileAbout, ProfileExperience, ProfileSkills, ProfileProjects, ProfileWriting, ProfileTestimonials and ProfileContact are exported so you can compose your own order. Each takes its data, optional labels and section props.

Model helpersCopy Anchor Link

Exported from personal-widgets: tenureBetween, totalExperience (merges overlapping roles), groupSkills, distinct, isWorkingNow, offsetHours, partsIn, isKnownTimeZone.

AccessibilityCopy Anchor Link

Each section is a <section> labelled by its heading; there is one h1, the name in the sidebar. Counts are part of the heading text for screen readers. Each app card is one link. Project tabs follow the tabs pattern. The project cards use one link each. Availability is text, the dot is decoration.

RTL & i18nCopy Anchor Link

English and Arabic strings, overridable. Names and companies are wrapped in <bdi> so mixed-script text does not reorder. Latin digits.

StylingCopy Anchor Link

Container queries, tokens only. Avatar size is a class on Avatar.

Do / Don'tCopy Anchor Link

• Do give timeZone if you want the clock; leave it out to hide it.
• Do keep the headline to one sentence.
• Do show app marks as they are: ProductIcon renders the official mark, never a generic icon or a recoloured one.
• Don't show apps or account details to visitors. They only render in the owner view.
• Don't put more than about five links in the hero.
• The page does not generate a PDF. The CV button links to a file you provide with cvHref.

RelatedCopy Anchor Link

PersonalWidgets, BlogIndex, Timeline, FeatureStory.

LabCopy Anchor Link

Story Components/Website/Profile Page (Default, Owner View, Owner View Arabic, Owner View New) and page story Pages/Public/Profile.