Component
BottomSheet
BottomSheet preserves Base UI's focus, dismissal, nesting, gesture, and snap-point behavior while providing a polished bottom presentation and safe-area handling.
Preview
Opens as a touch-first drawer with focus management and swipe dismissal.
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/bottom-sheet.jsonUsage
import { BottomSheet } from "@/components/ui/bottom-sheet"
export function Filters() { return ( <BottomSheet snapPoints={["28rem", 1]}> <BottomSheet.Trigger>Open filters</BottomSheet.Trigger> <BottomSheet.Content> <BottomSheet.Header> <BottomSheet.Title>Filters</BottomSheet.Title> <BottomSheet.Description>Narrow the results.</BottomSheet.Description> </BottomSheet.Header> </BottomSheet.Content> </BottomSheet> )}Anatomy
BottomSheetTriggerContentHeaderTitleDescriptionFooterCloseBehavior notes
- Supports controlled and uncontrolled open state.
- Snap points and swipe dismissal are inherited from Base UI Drawer.
- VirtualKeyboardProvider keeps form controls visible above software keyboards.
Accessibility
Always include a Title. Include a Description when it adds meaningful context. Escape, focus trapping, restoration, and backdrop dismissal are provided by Base UI.