Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

User Profile View Sheet for Ark UI

A View Profile button opens a right-side sheet for John Doe, with initials, contact lines, and a Send Message button.

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 React, Ark UI does not load the profile.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Sheet anatomy: content, close, title, description, footer

Usage

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">View Profile</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>User Profile</SheetTitle>
      <SheetDescription>View user information and activity</SheetDescription>
    </SheetHeader>
    <div className="flex flex-col gap-4 p-4">
      <div className="flex items-center gap-3">
        <Avatar className="size-16">
          <AvatarFallback className="bg-primary text-primary-foreground text-xl">
            JD
          </AvatarFallback>
        </Avatar>
        <div className="flex flex-col">
          <span className="font-semibold">John Doe</span>
          <span className="text-muted-foreground text-sm">@johndoe</span>
        </div>
      </div>
      <dl className="flex flex-col gap-2">
        {DETAILS.map((detail) => (
          <div className="flex justify-between text-sm" key={detail.label}>
            <dt className="text-muted-foreground">{detail.label}</dt>
            <dd>{detail.value}</dd>
          </div>
        ))}
      </dl>
      <Button className="w-full">Send Message</Button>
    </div>
{/* The rest of the file is under Installation. */}

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.

How does View Profile open the sheet?

The outline button labeled View Profile is the trigger, and its text is the accessible name. SheetTrigger takes asChild and merges onto the one Button inside it.

Which edge does it use?

The right: SheetContent leaves side unset. The corner close button is on because showCloseButton defaults to true. Escape and a click on the overlay close the sheet too, and focus goes back to the trigger.

API Reference

Sheet

Sets asChild. The rest is on the Sheet page.

Button

Sets variant="outline". The rest is on the Button page.

Avatar

No extra props in this demo. The rest is on the Avatar page.

All 29 sheet examples