CSSN'T Components 1.0

view_sidebar

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

Sheet_side — Props
PropTypeRequiredDefaultDescription
isOpenbooleanYes—Controls visibility of the sheet.
onOpenChange(next: boolean) => voidYes—Called 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.
size"minimized" | "small" | "medium" | "large" | "full"No"medium"Width preset of the sheet.
style"standard"No"standard"Visual style preset.
radius"none" | "sm" | "md" | "lg" | "xl"No"none"Corner radius preset.
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).
showScrimbooleanNofalseShows a background overlay behind the sheet.
contentBodyReact.ReactNodeNoundefinedMain content (scrollable area).
contentFooterReact.ReactNodeNoundefinedOptional footer area (actions).

useHorizontalDrag Props

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