Sheet / BottomSheet

A panel from the bottom of a phone screen that rests at snap points and closes with a swipe down. The kit's Dialog, Drawer, menus and every picker use it on a phone, with no extra code.

Try it: pull the handle up, then swipe down to close.

Order #1041

Teh tarik

Rp 15.000

Phone: a sheet, the footer stays at the bottom

With responsive="sm", a wide screen opens a drawer from the right, with the same content. On a phone it stays a sheet.

The sheet in this demo lives inside the phone frame (the container prop).

What the kit already does

Snap points. The sheet never stops in between: released slowly it goes to the nearest point, flicked it goes to the next.
Drag from anywhere. The handle and the title can always be dragged. The content drags too once it is scrolled to the top.
On-screen keyboard. The sheet rises above the phone keyboard. The focused field stays visible inside the sheet.
Physical keyboard. The handle is a button: Up, Down, Home and End move between points. Esc closes. Focus is trapped and returns to the opener.
The page is not dimmed. The edge of the sheet shows through a hairline and a shadow. A tap outside still closes it.

Just enough code

export function ChangeStatus() {
   const [open, setOpen] = useState(false);
   return (
      <BottomSheet
         open={open}
         onOpenChange={setOpen}
         title="Ubah status #1041"
         snapPoints={[0.5, 0.92]}
         responsive="sm"
         footer={<Button onClick={save}>Simpan</Button>}
      >
         <StatusOptions />
      </BottomSheet>
   );
}

Use a plain Dialog or DropdownMenu and on a phone both already turn into a sheet.

A sheet on a phone, automatically

Dialog

size sets the tallest point: sm 50%, md 75%, lg 92%.

Drawer

Every side becomes a bottom sheet. Navigation can still slide in from the side.

DropdownMenu

Becomes an action sheet. A menu is written once for both forms.

Picker

ObjectSelect, UserSelect and others: the list of choices becomes a sheet.

Sheet / BottomSheet

Demo

What the kit already does

A sheet on a phone, automatically

The kit isn't on open sale.