Docs
Responsive Sheet
Responsive Sheet
A sheet that adapts to different screen sizes, showing as a bottom sheet on mobile and a dialog on desktop.
This component appears as a bottom sheet on mobile and a dialog on desktop. Try resizing your browser to see the difference.
Overview
The ResponsiveSheet component provides a responsive UI that adapts to the user's device:
- On mobile devices, it renders as a bottom sheet that slides up from the bottom of the screen
- On desktop devices, it renders as a dialog that appears in the center of the screen
Installation
Usage
import { ResponsiveSheet } from "@/components/ui/responsive-sheet";import { ResponsiveSheetContent } from "@/components/ui/responsive-sheet";
const [open, setOpen] = useState(false);
<ResponsiveSheet open={open} onOpenChange={setOpen}>
<ResponsiveSheetContent
mobileClassName="p-6 max-h-[85vh]"
desktopClassName="max-w-md"
>
{/* Your content here */}
</ResponsiveSheetContent>
</ResponsiveSheet>;Components
ResponsiveSheet
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Whether the sheet is open or not |
onOpenChange | (open: boolean) => void | - | Callback when the sheet open state changes |
children | ReactNode | - | The content to display inside the sheet |
modal | boolean | - | Whether the sheet should behave as a modal |
defaultOpen | boolean | - | The default open state of the sheet |
ResponsiveSheetContent
| Prop | Type | Default | Description |
|---|---|---|---|
mobileClassName | string | - | Class names applied only in mobile (sheet) view |
desktopClassName | string | - | Class names applied only in desktop (dialog) view |
className | string | - | Class names applied to both mobile and desktop views |
overlayClassName | string | - | Class names applied to the overlay |
children | ReactNode | - | The content to display in the component |