Skip to content

Imperative control

const actionsRef = useRef<SheetActions>(null);
<Sheet.Root actionsRef={actionsRef} detents={['content', 'full']}>
{/* ... */}
</Sheet.Root>
<button onClick={() => actionsRef.current?.snapTo('full')}>Expand</button>

For the cases a controlled open/activeDetent prop is awkward for (deep links, push notifications, a descendant reaching up without prop-drilling): actionsRef.current.open(), .close(), and .snapTo(detent) animate exactly like a controlled prop change would. snapTo warns once in dev if detent isn’t in the sheet’s configured detents, and still resolves to the nearest one rather than no-op’ing.