Shadcn Sheet Components

Shadcn Sheet Component

The Shadcn Sheet is a panel that slides in from an edge of the screen on top of the current page. It gives you a lot of room for secondary content, such as a form, a navigation menu, a detail view or a long document, while the page behind it stays in place. When the sheet closes, users are exactly where they left off.

Side panels for editing a profile, creating an account or reading long terms of service are the focus of these shadcn sheet examples, which slide in from the right, left, top or bottom, plus a Pro candidate profile. The sheet is based on the dialog primitive available in both Radix UI and Base UI and styled with shadcn/ui, React and Tailwind CSS, so focus trapping, scroll locking and closing with the keyboard are handled for you.

What is the Shadcn Sheet Component?

A sheet is a modal dialog positioned against one side of the viewport. The side prop on SheetContent accepts top, right, bottom or left, with right as the default. Left and right sheets take the full height and three quarters of the width on small screens, up to sm:max-w-sm on larger ones, while top and bottom sheets size to their content. A dimmed overlay covers the page, and a close button is shown in the corner unless you set showCloseButton to false.

Use a sheet for tasks that need more space than a Popover but should not replace the page: filters, carts, settings and record details. For a bottom panel that users can drag down to close on mobile, use a Drawer. To ask for confirmation before a destructive action, use an Alert Dialog, and for persistent side navigation that is always visible on desktop, use a sidebar layout instead.

Anatomy of the Shadcn Sheet

8 Shadcn Sheet Variants

Each sheet variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic: A right side sheet with an Edit profile title and description, the default starting point.
• Scrollable content: Terms of service that scroll inside a Scroll Area while the footer with Cancel and Accept buttons stays in place.
• Left side: A sheet that slides in from the left, suited to mobile navigation menus.
• Form sheets: A Create Account form with name, email and password fields, and an Edit Profile form with an avatar, phone number and password confirmation.
• Top and bottom: A top sheet with a notification list and a bottom sheet with quick actions like Take Photo and Choose File.
• User profile (Pro): A candidate profile with a cover image, avatar and location, a row of experience, rejected and hired stats, an expandable about section, skill badges with a +N more toggle and contact details.

How to Install the Shadcn Sheet Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a sheet variant by its name:

npx shadcn@latest add @shadcnuikit/sheet1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Sheet Component

Put a SheetTitle in every sheet and use SheetClose for buttons that dismiss it. Set side on SheetContent to change the edge.

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function EditProfileSheet() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Edit profile</Button>
      </SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Update your details and save when you are done.
          </SheetDescription>
        </SheetHeader>
        <div className="grid gap-2 px-4">
          <Label htmlFor="name">Name</Label>
          <Input id="name" defaultValue="Jane Cooper" />
        </div>
        <SheetFooter>
          <Button type="submit">Save changes</Button>
          <SheetClose asChild>
            <Button variant="outline">Cancel</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

Why Use the Shadcn Sheet Component

• Keeps context: The page stays behind the overlay, so users can finish a task and return without losing their place.
• Four directions: One prop places the panel on any edge, from side panels to top banners and bottom action sheets.
• Accessible modal: Focus is trapped inside, page scroll is locked and Escape closes the sheet, all from the primitive.
• Room for real content: Full height side panels fit forms, lists and scrollable documents that do not fit in a popover.
• Themeable: Background, border, overlay and slide animations use your theme tokens and work in dark mode.

Common Sheet Use Cases

• Mobile navigation: A left sheet that holds the main menu on small screens.
• Filters: Product or table filters in a right side panel.
• Shopping carts: A cart summary with items and a checkout button.
• Edit forms: Create or edit a record without leaving the list view.
• Detail views: User profiles, orders or tickets opened from a table row.
• Notifications and quick actions: Top or bottom sheets for alerts and short action lists.

Customizing the Shadcn Sheet

Pass a className to SheetContent to change the width or height, for example sm:max-w-lg for a wider side panel. For long content, wrap the body in a Scroll Area and keep the footer fixed, as the terms of service variant does. Colors come from your theme variables, which you can generate with the free Theme Generator.

A wider sheet without the default close button looks like this:

<SheetContent side="right" showCloseButton={false} className="sm:max-w-lg">
  ...
</SheetContent>

Sheet Accessibility and Keyboard Support

The sheet content renders with role="dialog", is labelled by SheetTitle and described by SheetDescription, and the rest of the page is hidden from assistive technology while it is open. Focus moves into the sheet when it opens, stays trapped inside while it is open and returns to the trigger when it closes. If your design has no visible title, keep the SheetTitle and hide it with sr-only rather than removing it.

Sheet Best Practices

• Use the right edge for details, filters and forms, and the left edge for navigation.
• Always include a SheetTitle, even if you hide it visually.
• Keep primary actions in a SheetFooter so they are easy to find.
• Let long content scroll inside the sheet instead of making the whole page scroll.
• Avoid opening a sheet from another sheet; replace the content or use a separate page.
• On mobile, consider a Drawer for bottom panels that users expect to swipe away.

Components Related to Sheet

Shadcn Sheet FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.