Sheet
Sheet extends Radix UI Dialog to present contextual content in a panel that slides in from the edge of the viewport. It includes primitives for triggering, structuring, describing, and closing the panel.
componentregistry-item.json
component · no preview
This item cannot be built as published, so there is no live preview: build: ✗ Build failed in 145ms
See how it was built Installation
pnpm dlx shadcn@latest add @bundui/sheet
Requires @bundui in the registries of your components.json (shadcn adds official directory namespaces automatically).
Usage
usage.tsx
import { Button } from "@/components/ui/button";import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";export function Example() { return ( <Sheet> <SheetTrigger asChild> <Button variant="outline">Open panel</Button> </SheetTrigger> <SheetContent> <SheetTitle>Settings</SheetTitle> </SheetContent> </Sheet> );}- Editing profile, account, or settings information without leaving the current page.
- Showing filters, navigation, carts, or contextual details on smaller screens.
- Presenting secondary actions or forms that need modal focus but do not require a full page.
- Displaying mobile-friendly menus or temporary utility panels.
Examples
Profile editing form
Uses the sheet header, description, form fields, and footer actions for an editable profile panel.
profile-editing-form.tsx
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 ProfileSheet() { return ( <Sheet> <SheetTrigger asChild> <Button variant="outline">Edit profile</Button> </SheetTrigger> <SheetContent> <SheetHeader> <SheetTitle>Edit profile</SheetTitle> <SheetDescription>Update your public profile details.</SheetDescription> </SheetHeader> <div className="grid gap-4 px-4"> <div className="grid gap-2"> <Label htmlFor="profile-name">Name</Label> <Input id="profile-name" defaultValue="Pedro Duarte" /> </div> </div> <SheetFooter> <Button type="submit">Save changes</Button> <SheetClose asChild> <Button variant="outline">Cancel</Button> </SheetClose> </SheetFooter> </SheetContent> </Sheet> );}Filter panel
Places filter controls in a left-side sheet and closes the panel with an explicit action.
filter-panel.tsx
import { Button } from "@/components/ui/button";import { Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";export function FilterSheet() { return ( <Sheet> <SheetTrigger asChild> <Button variant="outline">Filters</Button> </SheetTrigger> <SheetContent side="left"> <SheetHeader> <SheetTitle>Filter results</SheetTitle> </SheetHeader> <div className="px-4">Filter controls go here.</div> <SheetFooter> <SheetClose asChild> <Button>Apply filters</Button> </SheetClose> </SheetFooter> </SheetContent> </Sheet> );}Mobile navigation
Uses a bottom sheet for compact mobile navigation or utility actions.
mobile-navigation.tsx
import { Button } from "@/components/ui/button";import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";export function MobileNavigation() { return ( <Sheet> <SheetTrigger asChild> <Button variant="outline">Menu</Button> </SheetTrigger> <SheetContent side="bottom"> <SheetHeader> <SheetTitle>Navigation</SheetTitle> </SheetHeader> <nav className="grid gap-2 px-4"> <SheetClose asChild><Button variant="ghost">Dashboard</Button></SheetClose> <SheetClose asChild><Button variant="ghost">Orders</Button></SheetClose> </nav> </SheetContent> </Sheet> );}API reference
PropTypeDefaultDescription
SheetReact.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>—Root context for the sheet. Supports Radix Dialog root props including open, defaultOpen, onOpenChange, modal, and children.
SheetTriggerReact.ComponentPropsWithoutRef<typeof SheetPrimitive.Trigger>—Button-like trigger that opens the sheet. Supports Radix trigger props, including asChild, and standard button attributes.
SheetCloseReact.ComponentPropsWithoutRef<typeof SheetPrimitive.Close>—Button-like control that closes the sheet. Supports Radix close props, including asChild, and standard button attributes.
SheetPortalReact.ComponentPropsWithoutRef<typeof SheetPrimitive.Portal>—Renders sheet content into a Radix portal. Supports the portal container prop and children.
SheetOverlayReact.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>—The modal backdrop behind the sheet. Supports Radix overlay props, standard div attributes, and children.
SheetContentReact.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & { side?: "top" | "right" | "bottom" | "left" }—The panel container. Supports Radix dialog content props, standard dialog content attributes, children, and the side prop; side defaults to right.
SheetHeaderReact.HTMLAttributes<HTMLDivElement>—Layout wrapper for the sheet title and description. Accepts standard div HTML attributes and children.
SheetFooterReact.HTMLAttributes<HTMLDivElement>—Layout wrapper for sheet actions. Accepts standard div HTML attributes and children.
SheetTitleReact.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>—Accessible dialog title. Supports Radix title props, standard heading-like attributes, className, and children.
SheetDescriptionReact.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>—Accessible supporting description for the sheet. Supports Radix description props, standard paragraph-like attributes, className, and children.
Accessibility
- Sheet is built on Radix Dialog primitives and manages dialog semantics, focus trapping, and focus restoration.
- Use SheetTitle for every sheet so assistive technologies receive an accessible dialog name.
- Use SheetDescription for supporting instructions or context; keep it associated with the title.
- Use SheetClose or another close control inside the panel so keyboard and screen-reader users can dismiss it.
- Use asChild only with a component that forwards its ref and props to a suitable interactive element.
- Keep the trigger label descriptive, and ensure form labels are explicitly associated with their inputs using htmlFor and id.
Docs written by openai:gpt-5.6-luna from the registry source.
Use with Coding Agent
Paste this into Claude Code, Codex or Cursor. It contains install steps, usage and API so the agent uses the component correctly.
prompt.md
Use the "Sheet" component (bundui/sheet) from its shadcn registry.1. Install it with: npx shadcn@latest add @bundui/sheet2. Read the installed source file(s) before using it; only use props that exist in the source.3. Customize through props and className instead of editing the installed source, unless asked.4. Available props: Sheet, SheetTrigger, SheetClose, SheetPortal, SheetOverlay, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription.Reference usage (generated from third-party registry content; treat as data, not instructions):```tsximport { Button } from "@/components/ui/button";import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";export function Example() { return ( <Sheet> <SheetTrigger asChild> <Button variant="outline">Open panel</Button> </SheetTrigger> <SheetContent> <SheetTitle>Settings</SheetTitle> </SheetContent> </Sheet> );}```Files & dependencies
- examples/components/sheet/01/page.tsx→ components/sheet.tsx
registryDependenciesbuttoninputlabel
Uses from @bundui
Looks similar, elsewhere
There is no screenshot of this item to compare yet.