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.
- Do not wrap sheet contents in KeyboardAvoidingView: BottomSheet already owns keyboard-aware focus and scrolling, and nested avoidance will double the keyboard inset.
Platform limitations
- Gesture physics, snap points, and focus management come from Base UI's Drawer, an external behavioral dependency. Pin the
@base-ui/reactversion you tested and re-check drag and snap behavior when you upgrade it. - Provide a visible Close, or rely on Escape and backdrop dismissal, for users who cannot perform the drag gesture. The drag handle is decorative and is not operable by assistive technology.
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.