Sheet Component

A responsive, accessible dialog component that slides in from the edge of the screen.

Multiple positions: top, right, bottom, left
Smooth animations with configurable durations
Built with accessibility in mind using Radix UI
Includes nested components for header, footer, and content structuring

Installation

The Sheet component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the sheet in your project.

React TSX
1import {
2  Sheet,
3  SheetContent,
4  SheetDescription,
5  SheetHeader,
6  SheetTitle,
7  SheetTrigger,
8} from "@/components/modern-ui/sheet"

React TSX
1<Sheet>
2  <SheetTrigger>Open Sheet</SheetTrigger>
3  <SheetContent>
4    <SheetHeader>
5      <SheetTitle>Sheet Title</SheetTitle>
6      <SheetDescription>
7        Sheet description goes here. Make it useful for the user.
8      </SheetDescription>
9    </SheetHeader>
10    <div className="py-4">Sheet content goes here.</div>
11  </SheetContent>
12</Sheet>

Examples

Basic Sheet

Side Variations

Form Integration

API Reference

Sheet

The main container component for the sheet.

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state of the sheet
`onOpenChange`	`(open: boolean) => void`	-	Callback fired when the open state changes
`defaultOpen`	`boolean`	`false`	Whether the sheet is open by default (uncontrolled)
`modal`	`boolean`	`true`	Whether the sheet should block interactions with the rest of the page when open
`children`	`React.ReactNode`	-	The sheet trigger and content

SheetTrigger

The button that triggers the sheet.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child
`children`	`React.ReactNode`	-	The element that will trigger the sheet

SheetContent

The content of the sheet that appears from the edge of the screen.

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	The side from which the sheet enters the screen
`className`	`string`	-	Additional CSS classes to apply
`children`	`React.ReactNode`	-	The content of the sheet

SheetHeader

A container for the sheet header content.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply
`children`	`React.ReactNode`	-	The header content

SheetFooter

A container for the sheet footer content.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply
`children`	`React.ReactNode`	-	The footer content

SheetTitle

The title of the sheet.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply
`children`	`React.ReactNode`	-	The title content

SheetDescription

The description of the sheet.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply
`children`	`React.ReactNode`	-	The description content

SheetClose

The button that closes the sheet.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child
`children`	`React.ReactNode`	-	The element that will close the sheet

Accessibility

The Sheet component follows the WAI-ARIA Dialog pattern and includes the following accessibility features:

Focus is automatically trapped within the sheet when it is open
When closed, focus returns to the element that triggered the sheet
Escape key closes the sheet
aria-labelledby and aria-describedby attributes are automatically set based on the SheetTitle and SheetDescription components