Bottom Sheet

Installation

Usage

import {
  BottomSheet,
  BottomSheetContent,
  BottomSheetDescription,
  BottomSheetList,
  BottomSheetPanel,
  BottomSheetRow,
  BottomSheetTitle,
  BottomSheetTrigger,
} from '@/components/sora-ui/radix/bottom-sheet';

export default function Page() {
  return (
    <BottomSheet>
      <BottomSheetTrigger>Open settings</BottomSheetTrigger>
      <BottomSheetContent>
        <BottomSheetTitle>Settings</BottomSheetTitle>
        <BottomSheetDescription>Adjust sound and theme.</BottomSheetDescription>
        <BottomSheetPanel>
          <BottomSheetList>
            <BottomSheetRow label="Sound" value="On" />
            <BottomSheetRow label="Theme" value="Dark" />
          </BottomSheetList>
        </BottomSheetPanel>
      </BottomSheetContent>
    </BottomSheet>
  );
}

For a fully custom row (not the label — value layout), pass children to BottomSheetRow instead of label/value, or skip BottomSheetPanel/BottomSheetList/BottomSheetRow entirely and render your own content inside BottomSheetContent.

Props

BottomSheet

BottomSheetContent

BottomSheetRow

When to Use

Use the Bottom Sheet for mobile-first actions that need more room than a dropdown but shouldn't take over the whole screen — settings panels, filters, or action lists reachable with a thumb. snapPoints lets it act as a half-height quick-glance panel that expands to near-fullscreen on a second drag.

Avoid it for content that must stay reachable on desktop without a pointer-drag affordance, or for anything that must block navigation entirely — use a centered dialog instead.

Accessibility

Built on Radix Dialog, so focus is trapped inside the sheet while open, Esc and an outside click close it, and focus returns to the trigger on close. Radix requires both BottomSheetTitle and BottomSheetDescription on every sheet — both default to sr-only, so include them even when the sheet doesn't need a visible heading (Radix logs a console warning if BottomSheetDescription is missing). When prefers-reduced-motion: reduce is set, the sheet fades in/out instead of sliding.

Credits

Inspired by Vaul.