Which example shows which prop
Every Root prop, mapped to the example that shows it working. Some run on the homepage; the rest are inline further down in these docs, linked below.
| Prop | Example |
|---|---|
detents, activeDetent, onActiveDetentChange |
Snap heights, Ride tracker |
sequentialDetents, largestUndimmedDetent, onRelease, onOpenChangeComplete, themeColorDimming, closeThreshold |
Ride tracker |
actionsRef (open / close / snapTo) |
Ride tracker |
onTravel |
Ride tracker, the hero sheet |
modal |
Maps, Toast, Ride tracker |
side |
Sides (all four), Sidebar (left), Centered dialog (center) |
dismissible |
Cart and checkout, Non-dismissible confirm |
disableDrag |
Non-dismissible confirm, Responsive (desktop) |
handleOnly |
Profile form |
backgroundEffect |
Wallet, see Page transitions |
scrollbar |
Comments |
open, defaultOpen, onOpenChange |
Toast, every controlled example |
nonce |
CSP note in Styling |
Page transitionsMark your page wrapper data-scrollsheet-background and backgroundEffect scales, insets, and rounds it in sync with the sheet's travel, iOS-style.
Stylingscrollsheet ships mechanics only; style the panel with a plain className like any other card.