A floating glass bottom sheet that follows your finger and snaps with velocity.
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| open Show the sheet. | boolean | — |
| onClose Called after it is dragged, flung, tapped or back-buttoned closed. | () => void | — |
| snapPoints Resting heights in points or % of the screen; without them one snap sized to the content (capped below the status bar). | (number | "NN%")[] | fits content |
| initialSnap Snap index it opens at. | number | 0 |
| onSnapChange Fires when it settles on another snap. | (index: number) => void | — |
| title Centred heading under the grabber. | string | — |
| detached Float inset from the screen edges with every corner rounded (iOS 26); false docks it edge-to-edge. | boolean | true |
| inset Gap to the screen edges when detached. | number | 10 |
| radius Corner radius. | number | 32 |
| scheme Force light or dark glass and ink. | 'light' | 'dark' | kit theme |
| dismissible Allow drag-down / backdrop tap / back to close; otherwise it rubber-bands at the lowest snap. | boolean | true |
| haptics Light tap on open, selection tick on each snap. | boolean | true |
| bottomInset Edge-to-edge: padding above the home indicator; pass useSafeAreaInsets().bottom for the device. | number | platform safe inset |
| accessibilityLabel Label for the modal sheet. | string | title |
| style / contentStyle Sheet style (e.g. maxWidth) and the scrolling content container. | StyleProp<ViewStyle> | — |
| children Sheet content; scrolls at the top snap when taller than the sheet. | ReactNode | — |
Behaviour & accessibility
- Touch
- Drag from the grabber or the content. Release velocity picks the snap point, and a fling down or a backdrop tap dismisses it.
- Motion
- It springs up over a fading dim and the grabber widens while held. Without snapPoints it sizes to its content, and taller content scrolls.
- Reduced motion
- Snapping, opening and closing use short timings instead of springs.
- Haptics
- A light tap on open and a selection tick each time it settles on a snap point.
- Screen readers
- The sheet is modal and the escape gesture closes it. The grabber is adjustable: increment and decrement step between snap points, and decrement from the lowest one closes it.
- Platforms
- Real Liquid Glass on iOS 26, material blur on older iOS and web, and a frosted surface on Android. Android back closes it.
Source
Did you like the content?