Sheet
A panel that slides in from the edge of the screen. Extends the Dialog pattern with side-based positioning and slide animations.
#Installation
npx @barefootjs/cli add sheet#Usage
1import {2 Sheet,3 SheetTrigger,4 SheetOverlay,5 SheetContent,6 SheetHeader,7 SheetTitle,8 SheetDescription,9 SheetFooter,10 SheetClose,11} from '@/components/ui/sheet'#Examples
#Side Variants
1"use client"23import { createSignal } from '@barefootjs/client'4import {5 Sheet,6 SheetTrigger,7 SheetOverlay,8 SheetContent,9 SheetHeader,10 SheetTitle,11 SheetDescription,12 SheetFooter,13 SheetClose,14} from '@/components/ui/sheet'1516function SheetSides() {17 const [openTop, setOpenTop] = createSignal(false)18 const [openRight, setOpenRight] = createSignal(false)19 const [openBottom, setOpenBottom] = createSignal(false)20 const [openLeft, setOpenLeft] = createSignal(false)2122 return (23 <div className="flex flex-wrap gap-2">24 <Sheet open={openTop()} onOpenChange={setOpenTop}>25 <SheetTrigger>Top</SheetTrigger>26 <SheetOverlay />27 <SheetContent side="top" ariaLabelledby="top-title">28 <SheetHeader>29 <SheetTitle id="top-title">Top Sheet</SheetTitle>30 <SheetDescription>Slides from the top.</SheetDescription>31 </SheetHeader>32 <SheetFooter>33 <SheetClose>Close</SheetClose>34 </SheetFooter>35 </SheetContent>36 </Sheet>3738 {/* Repeat for right, bottom, left with side="right|bottom|left" */}39 </div>40 )41}#Form
1"use client"23import { createSignal } from '@barefootjs/client'4import {5 Sheet,6 SheetTrigger,7 SheetOverlay,8 SheetContent,9 SheetHeader,10 SheetTitle,11 SheetDescription,12 SheetFooter,13 SheetClose,14} from '@/components/ui/sheet'1516function EditProfileSheet() {17 const [open, setOpen] = createSignal(false)1819 return (20 <Sheet open={open()} onOpenChange={setOpen}>21 <SheetTrigger>Edit Profile</SheetTrigger>22 <SheetOverlay />23 <SheetContent24 side="right"25 ariaLabelledby="form-title"26 ariaDescribedby="form-description"27 >28 <SheetHeader>29 <SheetTitle id="form-title">Edit Profile</SheetTitle>30 <SheetDescription id="form-description">31 Make changes to your profile here.32 </SheetDescription>33 </SheetHeader>34 <div className="grid gap-4 py-4">35 <div className="grid grid-cols-4 items-center gap-4">36 <label for="name" className="text-right text-sm font-medium">37 Name38 </label>39 <input40 id="name"41 type="text"42 defaultValue="John Doe"43 className="col-span-3 flex h-10 w-full rounded-md border ..."44 />45 </div>46 <div className="grid grid-cols-4 items-center gap-4">47 <label for="username" className="text-right text-sm font-medium">48 Username49 </label>50 <input51 id="username"52 type="text"53 defaultValue="@johndoe"54 className="col-span-3 flex h-10 w-full rounded-md border ..."55 />56 </div>57 </div>58 <SheetFooter>59 <SheetClose>Cancel</SheetClose>60 <SheetClose>Save changes</SheetClose>61 </SheetFooter>62 </SheetContent>63 </Sheet>64 )65}#Accessibility
- ESC key to close - Press Escape to close the sheet
- Click outside to close - Click the overlay to close
- Scroll lock - Body scroll is disabled when sheet is open
- Focus trap - Tab/Shift+Tab cycles within the sheet
- ARIA attributes - role="dialog", aria-modal="true", aria-labelledby, aria-describedby
- Portal rendering - Sheet is mounted to document.body via createPortal
#API Reference
Sheet
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Whether the sheet is open. |
| onOpenChange | (open: boolean) => void | - | Event handler called when the open state should change. |
SheetTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | Whether the trigger is disabled. |
| asChild | boolean | false | Render child element as trigger instead of built-in button. |
SheetContent
| Prop | Type | Default | Description |
|---|---|---|---|
| side | 'top' | 'right' | 'bottom' | 'left' | 'right' | Which edge of the screen the sheet slides from. |
| showCloseButton | boolean | true | Whether to show the built-in close button (X) in the top-right corner. |
| ariaLabelledby | string | - | ID of the element that labels the sheet (typically SheetTitle). |
| ariaDescribedby | string | - | ID of the element that describes the sheet (typically SheetDescription). |
SheetTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | ID for aria-labelledby reference. |
SheetDescription
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | ID for aria-describedby reference. |
SheetClose
| Prop | Type | Default | Description |
|---|