Responsive Sheet

A sheet component that adapts to screen size - side drawer on desktop, bottom sheet on mobile.

Responsive Sheet

A sheet (drawer) component that automatically adapts its presentation based on screen size. On desktop, it renders as a traditional side sheet. On mobile devices, side sheets transform into bottom sheets for better touch accessibility.

Installation

pnpm dlx shadcn@latest add https://ui-registry.com/r/responsive-sheet.json

Usage

import {
  ResponsiveSheet,
  ResponsiveSheetContent,
  ResponsiveSheetHeader,
  ResponsiveSheetTitle,
  ResponsiveSheetDescription,
  ResponsiveSheetFooter,
} from '@/components/ui/responsive-sheet';

const [open, setOpen] = useState(false);

<ResponsiveSheet open={open} onOpenChange={setOpen} side="right">   <ResponsiveSheetContent>     <ResponsiveSheetHeader>       <ResponsiveSheetTitle>Sheet Title</ResponsiveSheetTitle>       <ResponsiveSheetDescription>         This is a description of the sheet content.       </ResponsiveSheetDescription>     </ResponsiveSheetHeader>     <ResponsiveSheetFooter>       <Button onClick={() => setOpen(false)}>Close</Button>     </ResponsiveSheetFooter>   </ResponsiveSheetContent> </ResponsiveSheet>

Examples

Right Sheet (Default)

<ResponsiveSheet open={open} onOpenChange={setOpen} side="right">
  <ResponsiveSheetContent>
    <ResponsiveSheetHeader>
      <ResponsiveSheetTitle>Settings</ResponsiveSheetTitle>
    </ResponsiveSheetHeader>
    {/ Sheet content /}
  </ResponsiveSheetContent>
</ResponsiveSheet>

Left Sheet

<ResponsiveSheet open={open} onOpenChange={setOpen} side="left">
  <ResponsiveSheetContent>
    <ResponsiveSheetHeader>
      <ResponsiveSheetTitle>Navigation</ResponsiveSheetTitle>
    </ResponsiveSheetHeader>
    {/ Navigation items /}
  </ResponsiveSheetContent>
</ResponsiveSheet>

With Navigation Menu

<ResponsiveSheet open={open} onOpenChange={setOpen} side="left">
  <ResponsiveSheetContent>
    <ResponsiveSheetHeader>
      <ResponsiveSheetTitle>Menu</ResponsiveSheetTitle>
    </ResponsiveSheetHeader>
    <nav className="flex flex-col gap-2">
      <a href="/" className="p-2 hover:bg-accent rounded-md">Home</a>
      <a href="/about" className="p-2 hover:bg-accent rounded-md">About</a>
      <a href="/contact" className="p-2 hover:bg-accent rounded-md">Contact</a>
    </nav>
  </ResponsiveSheetContent>
</ResponsiveSheet>

API Reference

ResponsiveSheet

Prop	Type	Default
open	`boolean`	-
onOpenChange	`(open: boolean) => void`	-
side	`"top" \`	"right" \	"bottom" \	"left"	`"right"`
className	`string`	-

ResponsiveSheetContent

Prop	Type	Default
className	`string`	-

ResponsiveSheetHeader

Prop	Type	Default
className	`string`	-

ResponsiveSheetTitle

Prop	Type	Default
className	`string`	-

ResponsiveSheetDescription

Prop	Type	Default
className	`string`	-

ResponsiveSheetFooter

Prop	Type	Default
className	`string`	-