Sheet

A panel that slides in from the edge of the screen. Extends the Dialog pattern with side-based positioning and slide animations.

Sheet Title

Sheet description text.

side

top

right

bottom

left

showCloseButton

#Installation

bunx --bun barefoot add sheet

#Usage

Sheet Title

This is a basic sheet that slides in from the right edge of the screen.

Sheets are useful for navigation menus, settings panels, and forms that complement the main content.

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

Top Sheet

This sheet slides in from the top.

Right Sheet

This sheet slides in from the right.

Bottom Sheet

This sheet slides in from the bottom.

Left Sheet

This sheet slides in from the left.

1"use client"23import { createSignal } from '@barefootjs/dom'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

Edit Profile

Make changes to your profile here. Click save when you're done.

Name

Username

1"use client"23import { createSignal } from '@barefootjs/dom'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