Profile Page

A person as a page: an aurora backdrop, frosted panels in four shapes, and a 24-hour dial that shows when they are at work — live, in their own time zone.

The page is primitives rather than one monolith. ProfilePage is the backdrop and a 12-column grid; GlassPanel — from Glass Panel, which installs alongside — is one glass recipe with a shape that encodes hierarchy (a slab for the hero, a tile for content, a disc for a single number, a capsule for chips); WorkdayDial is the one element that moves; useLocalTime is the hook under it. Compose them with your own data — nothing has to be reshaped to fit. The example page also drops in two other library pieces where a profile wants them: a Verify Badge beside the name and a row of Social Links under the contact details.

Profile page

The full page. Open it fullscreen to see it as a page — the dial reads Farah's local time, so the marker and the working state are honest wherever it is viewed.

shape"slab" | "tile" | "disc" | "capsule": on GlassPanel picks the corner treatment. The recipe — blur, hairline border, inset highlight — is the same; only the shape changes, so radius tells the reader what level a panel is.
GiveWorkdayDialtimeZone, start, end: and it draws the working window as an arc on a labelled 24-hour ring, with a live marker that takes the theme's primary colour inside the window and grey outside it. Hover or focus the ring for the window converted to the viewer's own time and how long until it opens.
aurora: on ProfilePage takes three colours for the blobs the glass blurs. Any CSS colour works, including var(--primary) to tie the first blob to the theme, as the example does. Change them per person or per team; the panels adapt because they are translucent.

Active Color

Solid

The same page with no glass: white cards, an ordinary shadow, a flat ground. Nothing else changes — every panel reads the variant from the page.

Setvariant"solid": on ProfilePage and every GlassPanel inside turns into a solid card with a normal shadow; the aurora is not drawn. One panel can opt out with its own variant.

Liquid glass

Fluid SVG displacement map refraction, specular inner highlights, and ambient depth backdrop using LiquidGlassWrapper and LiquidGlassBackground.

Setvariant"liquid-glass": on ProfilePage wraps the bento grid with fluid SVG refractive glass, deep backdrop blur, and high-contrast translucent panels.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Profile Page

npx shadcn@latest add @algorize-ui/profile-page

components/custom/blocks/ProfilePageBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs these for you. Run them yourself only if you are adding Profile Page to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

glass-panel, social-links and verify-badge are components, not packages — the shadcn CLI installs them as source files.

npx shadcn@latest add @algorize-ui/glass-panel @algorize-ui/social-links @algorize-ui/verify-badge

Building your own

The page above is a composition, not a component with forty props. Start from three panels and add what your data has.

Grid spans are plain Tailwind: the grid is grid-cols-1 md:grid-cols-6 lg:grid-cols-12, so lg:col-span-8 is two thirds of the page on desktop and full width on a phone. The three-disc row in the example is a nested grid grid-cols-3 inside one cell, which keeps the discs square at every width.

Features

One glass, four shapes

Every panel shares a single recipe. Slab, tile, disc and capsule differ only in corners, so the page reads as one material rather than a kit of cards.

A live dial, not a status dot

The 24-hour ring shows the working window and where the day is right now, computed in the person's own time zone with Intl.DateTimeFormat — no library.

Light and dark by construction

Panels are translucent white over the aurora in light mode and over near-black in dark mode. The blobs dim, the text flips, nothing else has to change.

Theme colours

The dial's arc and marker, the Follow button, the progress bars and the avatar are all written against primary and ring, so the page follows your theme preset — and the colour picker above — with no prop. Pass var(--primary) into aurora and the backdrop follows too.

Still, on purpose

Nothing animates on load. The only motion is the marker on the dial and a lift on panels you mark interactive — and both hold still under prefers-reduced-motion.

Props Reference

ProfilePage

Prop	Type	Default	Description
`variant`	`"glass" \| "solid"`	`"glass"`	Frosted panels over an aurora, or solid white cards with a shadow on a flat ground. Read by every `GlassPanel` inside.
`aurora`	`[string, string, string]`	violet, sky, peach	Colours of the three blobs behind the glass. Ignored by `solid`.
`className`	`string`	—	Add `rounded-[36px]` inside a container, `min-h-dvh` when it is the page.

GlassPanel

GlassPanel comes from Glass Panel (and so does useSurface, imported from @/components/custom/blocks/glass-panel-context); its shape, variant and interactive props are documented there. ProfilePage is that page's GlassBackdrop under the page's own name.

WorkdayDial

Prop	Type	Default	Description
`timeZone`	`string`	—	IANA zone the person works in, e.g. `"Asia/Dhaka"`.
`start`	`number`	—	Hour the working window opens, 0–24, in that zone.
`end`	`number`	—	Hour the working window closes, 0–24, in that zone.
`place`	`string`	—	Short name shown under the clock.
`name`	`string`	—	Used in the accessible description and the tooltip.
`note`	`string`	—	One extra line at the bottom of the tooltip, e.g. `"Usually answers the same day"`.
`className`	`string`	—	Sizing; the dial fills its width up to `max-w-[220px]`.

useLocalTime

Installed alongside the page in profile-page-hooks.ts: import { useLocalTime } from "@/components/custom/blocks/profile-page-hooks";.

Prop	Type	Default	Description
`timeZone`	`string`	—	IANA zone to read the clock in. Returns `{ hour, label, offsetFromViewer } \| null`: `hour` is fractional (14.5 for 14:30), `label` the readable clock, `offsetFromViewer` how many hours that zone runs ahead of the viewer's own. It is `null` until the first client read, so server and client render the same markup.