Side sheet
Edit page settings in a modal panel with a scrollable body, pinned actions and deliberate focus return.
Component review
Choose how your review workspace appears.
- Card order
- Newest first
- Card summaries
- Visible
Settings apply to this preview.
Implementation
1"use client";2 3import {4 useEffect,5 useId,6 useRef,7 useState,8 type ComponentPropsWithoutRef,9 type ReactNode,10} from "react";11import { X } from "lucide-react";12 13export type SideSheetProps = Omit<14 ComponentPropsWithoutRef<"dialog">,15 "open" | "title" | "children" | "onClose" | "onCancel"16> & {17 open?: boolean;18 defaultOpen?: boolean;19 onOpenChange?: (open: boolean) => void;20 title: ReactNode;21 description?: ReactNode;22 children: ReactNode;23 footer?: ReactNode;24 /** Content of the built-in trigger. Null hides it for an external trigger. */25 trigger?: ReactNode;26 side?: "left" | "right";27 dismissible?: boolean;28 closeLabel?: string;