Sheet
A panel that slides in from the side of the screen.
Import
import {
Sheet,
SheetTrigger,
SheetContent,
SheetHeader,
SheetTitle,
SheetDescription,
} from "@retents/ui/sheet"Usage Guidelines
When to use
- For supplementary content or forms that the user can access without leaving the current page, such as filters, settings, or detail panels.
- When the content is secondary to the main view and doesn't need a full-page modal.
- For navigation menus on mobile (sliding side menu pattern).
When NOT to use
- For focused tasks requiring the user's full attention — use Dialog instead.
- For destructive action confirmations — use AlertDialog instead.
- For mobile-friendly bottom panels — use Drawer instead.
Preview
Side variants
The side prop controls the direction. Available values: "top", "right" (default), "bottom", "left".
<SheetContent side="left">
{/* content */}
</SheetContent>