Uptoolkit
GitHub

Public Profile Shell

Actor profile layout that pairs the profile header with a two-column content slot for signed-out visitors.

Mira Halvorsen cover image

Mira Halvorsen

@mira@fediverse.example

Cartographer. I make maps of things that are hard to see.

Posts
1.2K
Followers
18.9K
Following
342

Joined July 2019

Timeline

The timeline or wall feed renders in the shell's content slot.

Installation

npx shadcn@latest add https://ui.uptoolkit.com/r/public-profile-shell.json

Usage

A minimal top bar, the ProfileHeader block, and a two-column area for the timeline plus an optional rail — the layout profile-page and wall-page compose inline, pulled out so a public profile route can reuse it directly.

import { PublicProfileShell } from "@/components/public-profile-shell";

<PublicProfileShell actor={actor} counts={counts} signInHref="/login" aside={<MutualsCard />}>
  <SocialFeed viewer={undefined} collection={timeline} />
</PublicProfileShell>;

Signed-out follow

viewer isn't a prop here — the shell always renders ProfileHeader without one, since the visitor isn't signed in. onFollow and onUnfollow still fire after the optimistic UI update, so redirect to signInHref from one of them if you want the follow button to gate on sign-in instead of failing silently.

Layout

aside renders in a lg:w-80 rail next to children; pass asideFirst to put it before the main column, matching a wall-style layout instead of a feed-style one. Omit aside for a single-column page.