All components
Surfaces
BottomSheet
Bottom-positioned modal sheet with handle, structured header, footer, density, and surface variants.
Surfaces
Interactive
Needs State Matrix
import { BottomSheet } from '@ivim/native/components';
Playground
Adjust the controls to preview live prop combinations. The code snippet updates to match the current selection.
Bottom Sheet
This is a bottom sheet.
variant
variant
elevated
filled
outlined
plain
muted
glass
<BottomSheet />
Example
State Matrix
Trigger
Content preview
Bottom sheet
Use for compact mobile actions.
Structured
Sheet title
Structured sheet content preview.
Glass
Sheet title
Structured sheet content preview.
Bottom sheet content.
Deviations from Untitled UI
Where this component deliberately differs from Untitled UI's API, and why. These are kept choices, not gaps to close.
Untitled UI
`slideout-menus` (side drawer)
Ours
`BottomSheet`
Bottom sheets are the native-mobile equivalent of desktop slideouts; a side drawer is a web pattern.
State coverage
Interaction and visual states this component supports.
default
pressed
disabled
active
Token references
Semantic design tokens this component page exercises. Tap one to edit it live.