CSSN'T Components

Design system

Sheet side

Side overlay panel for tools and details.

Sheet_side Examples

Copy-ready examples with live previews.

Basic usage

Controlled sheet (isOpen / onOpenChange) with body content.

Live preview

Tip: abre el drawer y scrollea el contenido para validar el overlay/scrim dentro del preview.
Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
Content row 15
Content row 16
Content row 17
Content row 18

Basic

import { useState } from "react";
import Sheet_side from "@/_components/sheet/side/Sheet_side";
import { Button } from "@/_components/buttons_variants/buttons/Button";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open</Button>

      <Sheet_side
        isOpen={open}
        onOpenChange={setOpen}
        title="Side sheet"
        side="right"
        size="medium"
        showScrim
        contentBody={<div style={{ padding: 12 }}>Body</div>}
      />
    </>
  );
}

Sizes

Use size to switch between minimized / small / medium / large / full.

Live preview

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14

Sizes

import { useState } from "react";
import Sheet_side from "@/_components/sheet/side/Sheet_side";
import { Button } from "@/_components/buttons_variants/buttons/Button";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open</Button>

      <Sheet_side
        isOpen={open}
        onOpenChange={setOpen}
        title="Large sheet"
        side="left"
        size="large"
        showScrim
        contentBody={<div style={{ padding: 12 }}>Long content</div>}
      />
    </>
  );
}

Side / offset / radius / scrim

Common layout controls for how the sheet is positioned and shaped.

Live preview

side
size
offset
radius
Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
Content row 15
Content row 16
Content row 17
Content row 18

Variants

import Sheet_side from "@/packages/ui/src/_components/sheet/side/Sheet_side";

export default function Example() {
  return (
    <Sheet_side
      isOpen
      onOpenChange={() => {}}
      title="Sheet"
      side="right"
      size="medium"
      offset="md"
      radius="lg"
      style="standard"
      showScrim
      contentBody={<div style={{ padding: 12 }}>Body</div>}
      contentFooter={<div style={{ padding: 12 }}>Footer</div>}
    />
  );
}

No scrim

Disable background overlay with showScrim={false}.

Live preview

Con showScrim=false, el contenido de fondo sigue siendo interactuable.
Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12

No scrim

import { useState } from "react";
import Sheet_side from "@/_components/sheet/side/Sheet_side";
import { Button } from "@/_components/buttons_variants/buttons/Button";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open</Button>

      <Sheet_side
        isOpen={open}
        onOpenChange={setOpen}
        title="No scrim"
        side="left"
        size="medium"
        showScrim={false}
        contentBody={<div style={{ padding: 12 }}>Body</div>}
      />
    </>
  );
}

On this page

Sheet_side Props

Side sheet (left/right) controlled via `isOpen` and `onOpenChange`. Designed for navigation, settings panels, filters, etc.

This component commonly uses `position: fixed` for the overlay/sheet layers.

If you render it inside a constrained container (docs/live preview), ensure you create a containing block so fixed layers don't escape.

Tip: keep `contentBody` reasonably sized and let it scroll internally for long content.

Sheet_side props
PropTypeRequiredDefaultDescription
isOpenbooleanYesn/aControls visibility of the sheet.
onOpenChange(next: boolean) => voidYesn/aCalled when the sheet requests to open/close (scrim click, close button, drag, etc).
titlestringNoundefinedHeader text text.
side"left" | "right"No"right"Which side the sheet comes from. (Values: left, right)
size"minimized" | "small" | "medium" | "large" | "full"No"medium"Width preset of the sheet. (Values: minimized, small, medium, large, full)
style"standard"No"standard"Visual style preset. (Values: standard)
radius"none" | "sm" | "md" | "lg" | "xl"No"none"Corner radius preset. (Values: none, sm, md, lg, xl)
offset"none" | "sm" | "md" | "lg" | "top-sm" | "top-md" | "top-lg"No"none"Inset preset. Use `top-*` to keep space at the top (useful when there is a fixed header). (Values: none, sm, md, lg, top-sm, top-md, top-lg)
showScrimbooleanNofalseShows a background overlay behind the sheet.
contentBodyReact.ReactNodeNoundefinedMain content (scrollable area).
contentFooterReact.ReactNodeNoundefinedOptional footer area (actions).

useHorizontalDrag Props

Hook used by Sheet_side to support horizontal drag-to-close gestures (left/right). Treat this as an advanced/internal building block.

The hook typically listens to pointer/touch events and updates the sheet transform during drag.

Use it only when you need custom behavior beyond what Sheet_side already provides.

useHorizontalDrag props
PropTypeRequiredDefaultDescription
enabledbooleanNotrueEnables the drag gesture handling.
side"left" | "right"No"right"Sheet side (affects drag direction and close threshold logic). (Values: left, right)
sheetRefReact.RefObject<HTMLElement | null>Yesn/aRef to the sheet element that is being dragged.
thresholdnumberNo80Minimum drag distance (px) required to trigger close.
onClose() => voidYesn/aCalled when the gesture decides the sheet should close.
scrimRefReact.RefObject<HTMLElement | null>NoundefinedOptional ref to the scrim/overlay element (useful to coordinate pointer events).