BottomSheet

Install

npx stylesheet-ui add bottom-sheet

Usage

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

const [open, setOpen] = useState(false);

<BottomSheet visible={open} onClose={() => setOpen(false)}>
  <MyContent />
</BottomSheet>

<BottomSheet visible={open} onClose={() => setOpen(false)} height="60%">
  <MyContent />
</BottomSheet>

<BottomSheet
  visible={open}
  onClose={() => setOpen(false)}
  snapPoints={["30%", "60%", "90%"]}
>
  <ScrollableList />
</BottomSheet>