sheet
Extends the Dialog component to display content that complements the main content of the screen.
Philosophy
Sheets are dialogs that slide in from the edge — they maintain spatial context better than centered modals. Use them for supplementary content (settings panels, detail views, mobile navigation) where the user needs to reference what's behind the overlay. The side prop makes the direction of information flow explicit.
How It's Built
Installation
npx @gentleduck/cli add sheet
npx @gentleduck/cli add sheet
Usage
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Are you absolutely sure?</SheetTitle>
<SheetDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet><Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Are you absolutely sure?</SheetTitle>
<SheetDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>Examples
Side
Use the side property to <SheetContent /> to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.
Size
You can adjust the size of the sheet using CSS classes:
<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent className="w-[400px] sm:w-[540px]">
<SheetHeader>
<SheetTitle>Are you absolutely sure?</SheetTitle>
<SheetDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet><Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent className="w-[400px] sm:w-[540px]">
<SheetHeader>
<SheetTitle>Are you absolutely sure?</SheetTitle>
<SheetDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>Component Composition
API Reference
Sheet
| Prop | Type | Default | Description |
|---|---|---|---|
defaultOpen | boolean | false | Initial open state for uncontrolled usage |
open | boolean | -- | Controlled open state |
onOpenChange | (open: boolean) => void | -- | Callback when open state changes |
modal | boolean | true | Enables modal focus/interaction behavior |
children | React.ReactNode | -- | Sheet sub-components (SheetTrigger, SheetContent, etc.) |
...props | React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root> | -- | Additional props inherited from SheetPrimitive.Root |
SheetTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Renders child as trigger element instead of a default button |
children | React.ReactNode | -- | Trigger content |
...props | React.ComponentPropsWithoutRef<typeof SheetPrimitive.Trigger> | -- | Additional props inherited from SheetPrimitive.Trigger |
SheetPortal
| Prop | Type | Default | Description |
|---|---|---|---|
container | HTMLElement | -- | Optional portal container |
forceMount | true | -- | Forces mounted state for all portal children |
...props | React.ComponentPropsWithoutRef<typeof SheetPrimitive.Portal> | -- | Additional props inherited from SheetPrimitive.Portal |
SheetOverlay
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS class names |
...props | React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> | -- | Additional props inherited from SheetPrimitive.Overlay |
SheetContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | 'top' | 'right' | 'bottom' | 'left' | 'right' | The side from which the sheet slides in |
closeText | string | 'Close' | Screen-reader label for the built-in close button |
className | string | -- | Additional CSS class names |
children | React.ReactNode | -- | Sheet content |
...props | React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & VariantProps<typeof sheetVariants> | -- | Additional props inherited from SheetPrimitive.Content and the local sheetVariants |
SheetContent renders a built-in close button in the top-right corner.
SheetHeader
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS class names |
...props | React.HTMLAttributes<HTMLDivElement> | -- | Additional props to spread to the header container |
SheetFooter
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS class names |
...props | React.HTMLAttributes<HTMLDivElement> | -- | Additional props to spread to the footer div |
SheetTitle
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS class names |
...props | React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> | -- | Additional props inherited from SheetPrimitive.Title |
SheetDescription
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS class names |
...props | React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> | -- | Additional props inherited from SheetPrimitive.Description |
SheetClose
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Renders child as close control |
children | React.ReactNode | -- | Close control content |
...props | React.ComponentPropsWithoutRef<typeof SheetPrimitive.Close> | -- | Additional props inherited from SheetPrimitive.Close |