Bottom sheet

A sheet that rests at a peek or full height and follows your finger.

$npx shadcn@latest add @silicon-ui/bottom-sheet

overlaygesturemotion

Installation

$npx shadcn@latest add @silicon-ui/bottom-sheet

Install the dependencies.
$npm install @radix-ui/react-dialog lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/bottom-sheet/bottom-sheet.tsx
- components/silicon-ui/bottom-sheet/bottom-sheet.module.css
- components/silicon-ui/lib/escape.ts shared
- components/silicon-ui/lib/return-focus.ts shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

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

Prop	Type	Default
`title*`	`string`	—
`children*`	`ReactNode`	—
`trigger` The control that opens the sheet, usually a button. Focus returns to it when the sheet closes.	`ReactNode`	—
`open`	`boolean`	—
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`	—
`description`	`string`	—
`detents` Resting heights as fractions of the viewport height. The sheet opens at `initialDetent` and never grows past the largest.	`number[]`	—
`initialDetent` Index into the sorted detents the sheet opens at. Defaults to the smallest.	`number`	—
`onDetentChange`	`(index: number) => void`	—
`closeLabel`	`string`	—
`className`	`string`	—

Accepts the props of ButtonHTMLAttributes.