Bottom sheet

When to use #

Use it for

Mobile actions, filters and details that peek then expand.
Content that benefits from being half-open.

Skip it when

Desktop-only layouts; use a drawer or dialog.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/bottom-sheet.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { BottomSheet } from "@/components/ui/bottom-sheet"
import { Button } from "@/components/ui/button"

export function RoomActions() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Room actions</Button>
      <BottomSheet title="Room actions" description="Drag the handle, or fling up to expand." open={open} onOpenChange={setOpen}>
        <ul className="divide-y divide-border">
          {["Share the listing", "Duplicate the room", "Move to archive"].map((item) => (
            <li key={item} className="py-3 text-sm">{item}</li>
          ))}
        </ul>
      </BottomSheet>
    </>
  );
}

API reference #

BottomSheet

component

PropTypeDefault

title *string—

descriptionstring—

children *ReactNode—

openboolean—

defaultOpenbooleanfalse

onOpenChange((open: boolean) => void)—

detentsreadonly number[][0.45, 0.92]

onDetentChange((index: number) => void)—

classNamestring—

It exposes dialog and status semantics, with aria-label, aria-modal, aria-labelledby and aria-expanded kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour

↑Moves to the previous item or value.

EndJumps to the last item or the maximum.

↓Moves to the next item or value.

HomeJumps to the first item or the minimum.

EnterActivates the focused control.

SpaceActivates the focused control.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.