Sheet

Guidelines#

Use it for filters, record details beside a list, and the mobile navigation (the sidebar becomes a Sheet below md). Below lg, Max moves filters into a bottom sheet.

What you provide: side (right default, left, top, bottom), SheetHeader with SheetTitle and SheetDescription, a body (pad it 16px), and a SheetFooter with the main action first. showCloseButton={false} hides the ×.

Anatomy: side sheets are 75% wide up to 384px from sm, full height, background with a border on the inner edge.

Facts#

API#

TypeScript declarations emitted from src/components/ui/sheet.tsx (the module also exports its other parts).

declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): any;
declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): any;
declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): any;
declare function SheetContent({ className, children, side, showCloseButton, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
    side?: "top" | "right" | "bottom" | "left";
    showCloseButton?: boolean;
}): any;
declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): any;
declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): any;
declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): any;
declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): any;
export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h(DC.Sheet, { defaultOpen: true },
    h(DC.SheetTrigger, { asChild: true }, h(DC.Button, { variant: "outline" }, h(I.Filter), "Filters")),
    h(DC.SheetContent, { onOpenAutoFocus: function (e) { e.preventDefault(); } },
      h(DC.SheetHeader, null,
        h(DC.SheetTitle, null, "Filter prospects"),
        h(DC.SheetDescription, null, "Narrow the list, then save it as a view.")),
      h("div", { className: "grid gap-4 px-4" },
        h("div", { className: "grid gap-2" }, h(DC.Label, { htmlFor: "sh-1" }, "Job title contains"), h(DC.Input, { id: "sh-1", defaultValue: "Finance" })),
        h("div", { className: "flex items-center gap-3" }, h(DC.Checkbox, { id: "sh-2", defaultChecked: true }), h(DC.Label, { htmlFor: "sh-2", className: "font-normal" }, "Verified email only"))),
      h(DC.SheetFooter, null, h(DC.Button, null, "Show 128 prospects"), h(DC.Button, { variant: "ghost" }, "Clear all"))));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Overlays#