Avatar

avatar

A flexible avatar component with initials and image support

Initials in mono inside a bordered square.

Avatar on radix-ui with 5 sizes (xs-xl) and 2 shapes (circle, rounded), plus AvatarGroup for overlapping stacks with an optional max that collapses the rest into a +N tile. Exports Avatar, AvatarImage, AvatarFallback, AvatarGroup.

An easily stylable avatar component.

An image element with a fallback for representing the user.

An example blog index — a featured post and a grid of cards.

An example messaging UI — a conversation list beside a live thread.

A complete customer workspace with responsive app chrome, filters, lifecycle stages, and notes.

A live event workspace with attendee search, attendance filters, summary counts, and working check-in.

An example feed — a composer and a stream of posts with reactions.

An example email inbox — a message list beside a reading pane.

An example task board — columns of cards with priorities and assignees.

An example profile page — avatar, stats, and tabbed content.

An example dashboard — sidebar nav, KPI row, chart, and data table.

An example settings screen — tabbed sections of form controls.

A publishing workspace that moves stories from draft through scheduling to launch.

A live event workspace with attendee search, attendance filters, summary counts, and working check-in.

A complete commerce route with site chrome, product discovery, a working bag, totals, and order state.