Profile Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Profile Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import ProfilePage from @/components/blocks/profile-page.

// app/(app)/u/[handle]/page.tsx
"use client"

import { ProfilePage } from "@/components/blocks/profile-page"
import { PROFILE_PAGE_SAMPLE } from "@/components/blocks/profile-page-data"

export default function ProfileRoute() {
  return (
    <ProfilePage
      user={PROFILE_PAGE_SAMPLE.user}
      projects={PROFILE_PAGE_SAMPLE.projects}
      isOwner
      onFollow={async (following) => {
        await fetch("/api/follow", { method: following ? "POST" : "DELETE" })
      }}
      onSave={async (values) => {
        const res = await fetch("/api/profile", { method: "PUT", body: JSON.stringify(values) })
        if (!res.ok) throw new Error("We could not save your profile. Try again.")
      }}
    />
  )
}

Props

• userdefault "PROFILE_PAGE_SAMPLE.user"
  ProfileUser

  The person: { id, name, handle, avatar?, cover?, coverColor?, headline?, bio?, location?, website?, links?, joinedAt?, status?, lastSeen?, verified?, followers, following, projectCount?, isFollowing? }. Default: Emma Carter (PROFILE_PAGE_SAMPLE.user).

• projectsdefault "PROFILE_PAGE_SAMPLE.projects"
  ProfileProject[]

  Project cards: { id, name, description?, href?, language?, languageColor?, stars?, updatedAt?, pinned?, visibility? }. Default: six sample projects.

• activitydefault "PROFILE_PAGE_SAMPLE.activity"
  ProfileActivity[]

  Timeline rows: { id, type: commit | release | comment | star | project | follow | review, title, description?, time, href? }.

• contributionsdefault "PROFILE_PAGE_SAMPLE.contributions"
  ProfileContribution[]

  A year of { date, count, level } days for the heatmap, starting on a Sunday; [] hides it. Default: a seeded sample year.

• isOwnerdefault false
  boolean

  The viewer's own profile: Edit profile replaces Follow and Message.

• tab
  "overview" | "projects" | "activity"

  The open tab, controlled; pair it with onTabChange (a route per tab).

• defaultTabdefault "overview"
  "overview" | "projects" | "activity"

  The tab open on mount.

• onTabChange
  (tab: ProfileTab) => void

  Called when another tab opens, by a press, the keyboard, a swipe or the Projects counter.

• following
  boolean

  Whether the viewer follows this person, controlled; pair it with onFollow.

• defaultFollowingdefault false
  boolean

  Following on mount while uncontrolled; user.isFollowing turns it on too.

• onFollow
  (following: boolean) => void | Promise<unknown>

  Runs after Follow flips (optimistic); a rejection flips it back and announces labels.followFailed.

• onMessage
  () => void

  Adds a Message button next to Follow.

• onStatClick
  (stat: "followers" | "following") => void

  Turns the Followers and Following counters into buttons (open a list, a route). The Projects counter always opens the Projects tab.

• editOpen
  boolean

  The edit sheet, controlled; pair it with onEditOpenChange. Every opening starts from the current profile.

• defaultEditOpendefault false
  boolean

  Opens the edit sheet on mount.

• onEditOpenChange
  (open: boolean) => void

  Called when the edit sheet opens or closes.

• onSave
  (values: ProfileDraft) => void | Promise<unknown>

  Saves { name, handle, bio, location, website, avatar } after the checks pass (website with https:// added). A promise keeps Save loading; a rejection keeps the sheet open with its message.

• onAvatarUpload
  (blob: Blob, context: { file; signal; onProgress }) => Promise<string | void>

  Uploads the cropped photo from the edit sheet; resolve the new url. Without it the photo is a local preview until Save.

• pinnedCountdefault 4
  number

  Project cards on Overview: pinned ones first, then the rest in order; 0 hides the section.

• recentCountdefault 3
  number

  Activity rows on Overview, newest first; 0 hides the section.

• showHeatmapdefault true
  boolean

  The contributions heatmap on Overview.

• heatmapColordefault "#39d353"
  string

  Any CSS color for the heatmap cells; busier days are more opaque.

• swipeabledefault true
  boolean

  Below 768px the tab pages follow a horizontal swipe.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Follow, Save and the tab indicator.

• radiusdefault "md"
  "sm" | "md" | "lg"

  Corner size of the header, the cards and the panels (12 / 16 / 24px).

• loadingdefault false
  boolean

  Skeletons in the real layout while the profile loads.

• animateIndefault true
  boolean

  The header parts rise in one after another when the page mounts on the client; never while hydrating or under reduced motion.

• localedefault ""
  string

  Intl locale for the counters, the join date and relative times. Empty falls back to the UIProvider locale, then en-US (the demo offers en-GB, de-DE and ro-RO).

• now
  Date | number

  The reference time for "Updated 5 hours ago", "Seen 2 hours ago" and the activity times; default the live clock.

• labels
  Partial<ProfilePageLabels>

  Every visible string, merged over the English DEFAULT_PROFILE_PAGE_LABELS; avatarUpload carries the photo picker's strings.

• className
  string

  Classes for the root.

• classNames
  Partial<Record<"header" | "cover" | "avatar" | "identity" | "name" | "bio" | "meta" | "stats" | "stat" | "actions" | "tabs" | "overview" | "projects" | "activity" | "projectCard" | "heatmap" | "timeline" | "sheet", string>>

  Classes for the inner parts.

Parts

FAQ

More React blocks