CSSN'T Components 1.0

south

Sheet bottom

Bottom overlay for actions and content.

Sheet_bottom Examples

Copy-ready examples with live previews.

Basic usage

Controlled sheet (isOpen / onOpenChange) with body + footer slots.

Live preview

Tip: drag down to dismiss. The sheet is controlled (you own isOpen).
Background row 1
Background row 2
Background row 3
Background row 4
Background row 5
Background row 6
Background row 7
Background row 8
Background row 9
Background row 10
Background row 11
Background row 12
Background row 13
Background row 14

Basic

import { useState } from "react";
import Sheet_bottom from "@/_components/sheet/bottom/Sheet_bottom";

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

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>Open</button>

      <Sheet_bottom
        isOpen={open}
        onOpenChange={setOpen}
        title="Bottom sheet"
        contentBody={<div style={{ padding: 16 }}>Body</div>}
        contentFooter={<div style={{ padding: 16 }}>Footer</div>}
      />
    </>
  );
}

Sizes

Use size to control how tall the sheet is (small / medium / large / full).

Live preview

Background row 1
Background row 2
Background row 3
Background row 4
Background row 5
Background row 6
Background row 7
Background row 8
Background row 9
Background row 10
Background row 11
Background row 12
Background row 13
Background row 14
Background row 15
Background row 16

Sizes gallery

import { useState } from "react";
import Sheet_bottom from "@/packages/ui/src/_components/sheet/bottom/Sheet_bottom";

type SheetSize = "small" | "medium" | "large" | "full";

export default function Example() {
  const [open, setOpen] = useState<SheetSize | null>(null);

  return (
    <>
      <button onClick={() => setOpen("small")}>Open small</button>
      <button onClick={() => setOpen("full")}>Open full</button>

      <Sheet_bottom
        isOpen={open === "small"}
        onOpenChange={(v) => setOpen(v ? "small" : null)}
        size="small"
        showScrim
        title="Small"
        contentBody={<div style={{ padding: 16 }}>...</div>}
      />
    </>
  );
}

Scrim (overlay)

Toggle showScrim to enable/disable the overlay behind the sheet.

Live preview

showScrim renders an overlay behind the sheet. Close is still controlled via onOpenChange.
Background row 1
Background row 2
Background row 3
Background row 4
Background row 5
Background row 6
Background row 7
Background row 8
Background row 9
Background row 10
Background row 11
Background row 12
Background row 13
Background row 14

showScrim

import { useState } from "react";
import Sheet_bottom from "@/packages/ui/src/_components/sheet/bottom/Sheet_bottom";

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

  return (
    <Sheet_bottom
      isOpen={open}
      onOpenChange={setOpen}
      showScrim
      title="With scrim"
      contentBody={<div style={{ padding: 16 }}>...</div>}
    />
  );
}

Radius + minHeight

Use radius for corner rounding and minHeight to constrain the content area height.

Live preview

Note: current implementation uses minHeight as both min and max height for the content area.
Background row 1
Background row 2
Background row 3
Background row 4
Background row 5
Background row 6
Background row 7
Background row 8
Background row 9
Background row 10
Background row 11
Background row 12

radius + minHeight

import Sheet_bottom from "@/packages/ui/src/_components/sheet/bottom/Sheet_bottom";

export default function Example() {
  return (
    <Sheet_bottom
      isOpen
      onOpenChange={() => {}}
      radius="large"
      minHeight="520px"
      title="Details"
      contentBody={<div style={{ padding: 16 }}>Long content...</div>}
    />
  );
}

Interactive playground

Quick way to validate combinations in docs while keeping fixed layers inside the preview.

Live preview

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

Playground

import { useState } from "react";
import Sheet_bottom from "@/_components/sheet/bottom/Sheet_bottom";

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

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

      <Sheet_bottom
        isOpen={open}
        onOpenChange={setOpen}
        size="large"
        radius="medium"
        showScrim
        title="Playground"
        contentBody={<div style={{ padding: 16 }}>...</div>}
      />
    </>
  );
}

On this page

Sheet_bottom Props

Sheet_bottom — Props
PropTypeRequiredDefaultDescription
isOpenbooleanYesfalseControlled state: true shows the sheet, false hides it.
onOpenChange(open: boolean) => voidNo—Called when the sheet requests open/close (internally it triggers close via onOpenChange(false)).
titlestringNo—Header text text.
contentBodyReact.ReactNodeNo—Main body content.
contentFooterReact.ReactNodeNo—Footer content (usually actions).
size"small" | "medium" | "large" | "full"No"large"Applies a size preset class to the sheet root.
radius"none" | "small" | "medium" | "large" | "extra-large" | "full"No—Applies a radius preset class (if omitted, no radius class is added).
showScrimbooleanNofalseIf true, renders a scrim element behind the sheet.
minHeightstringNo"500px"Inline height constraint for the content area. Current implementation sets both minHeight and maxHeight to this value.