shadcn.io is an independent project built on shadcn/ui
The title is User Profile. Initials JD, John Doe, and @johndoe sit above Email, Location, and Joined. Send Message is the only button.
Use it to show who someone is without leaving the list. A Hover Card is lighter for a peek that should not trap focus. In Svelte, Ark UI does not load the profile.
Installation
Anatomy
Usage
<Sheet><SheetTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">View Profile</Button>{/snippet}</SheetTrigger><SheetContent><SheetHeader><SheetTitle>User Profile</SheetTitle><SheetDescription>View user information and activity</SheetDescription></SheetHeader><div class="flex flex-col gap-4 p-4"><div class="flex items-center gap-3"><Avatar class="size-16"><AvatarFallback class="bg-primary text-primary-foreground text-xl">JD</AvatarFallback></Avatar><div class="flex flex-col"><span class="font-semibold">John Doe</span><span class="text-muted-foreground text-sm">@johndoe</span></div></div><dl class="flex flex-col gap-2">{#each DETAILS as detail (detail.label)}<div class="flex justify-between text-sm"><dt class="text-muted-foreground">{detail.label}</dt><dd>{detail.value}</dd></div>{/each}</dl><Button class="w-full">Send Message</Button></div></SheetContent></Sheet>FAQ
How is the large avatar made?
An Avatar with className="size-16" and an AvatarFallback showing JD on the primary color. Add an AvatarImage before the fallback to show a photo.
How are the profile details marked up?
As a description list: each dt is a muted label (Email, Location, Joined) and each dd its value, in rows with justify-between. Screen readers read them as pairs.
What does Send Message do?
Nothing yet: it's a full-width Button with no handler. Open your compose view from it, or render it as a link to the conversation.
What does the profile sheet announce?
SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads User Profile, with View user information and activity as the description.
API Reference
Sheet
No extra props in this demo. The rest is on the Sheet page.
Button
Sets props and variant="outline". The rest is on the Button page.
Avatar
No extra props in this demo. The rest is on the Avatar page.
