A draggable sheet with snap points, a backdrop and spring physics.
npx shadcn@latest add @lokalhost/bottom-sheetThe source is copied to components/ui/bottom-sheet.tsx — it’s yours to edit.
import { BottomSheet } from "@/components/ui/bottom-sheet";
import { Button } from "@/components/ui/button";
import { ListGroup, ListItem } from "@/components/ui/list";
<BottomSheet open={open} onClose={() => setOpen(false)} snapPoints={[0.42, 0.88]} title="Share">
<Text style={{ marginBottom: 16, opacity: 0.6 }}>Drag the handle to expand, or flick down to close.</Text>
<ListGroup>
<ListItem title="Copy link" icon="link" iconColor="#3b82f6" onPress={() => setOpen(false)} />
<ListItem title="Add to favourites" icon="heart" iconColor="#ef4444" onPress={() => setOpen(false)} />
<ListItem title="Report" destructive onPress={() => setOpen(false)} />
</ListGroup>
</BottomSheet>| Prop | Type | Default | Description |
|---|---|---|---|
openrequired | boolean | — | Controls visibility. |
onCloserequired | () => void | — | Called after the sheet is dismissed by drag, backdrop or back button. |
snapPoints | number[] | [0.5, 0.9] | Heights as fractions of the screen, smallest first. |
initialSnap | number | 0 | Index into snapPoints used when opening. |
dismissible | boolean | true | Allow closing via backdrop press or dragging below the lowest snap point. |
title | string | undefined | Optional header rendered under the handle. |
childrenrequired | React.ReactNode | — | Sheet content. |