Silk’s components are designed to be used declaratively first, ensuring ease of use and automatic accessibility handling. If you want your sheet component to react to button clicks, we recommend you do it with the <Sheet.Trigger /> sub-component.

Sometimes you do need to control your sheet programmatically though, like when responding to an async operation, a URL change, or simply a different event than the <Sheet.Trigger /> press event. For such scenarios, Silk allows you to use a sheet as a controlled component.

A sheet component has two sets of props allowing you to control internal state: the presented and onPresentedChange props, and the activeDetent and onActiveDetentChange props.

The presented and onPresentedChange props

This set of props allows you to present and dismiss a sheet programmatically.

When setting the value of the presented prop to true, it will present the sheet, when setting it to false, it will dismiss it. You also need to pass a function allowing to update the value to the onPresentedChange prop, so it can be updated by the component itself as a result of a user interactions—like dismissing the sheet with a swipe, or pressing the escape key.

import { useState } from "react";
import { Sheet } from "@silk-hq/components";

export default function ControlledSheet() {
  const [presented, setPresented] = useState(false);
  
  useEffect(() => {
    const timer = setTimeout(() => {
      setPresented(true);
    }, 3000); // Open dialog after 3 seconds

    return () => clearTimeout(timer);
  }, []);

  return (
    <Sheet.Root presented={presented} onPresentedChange={setPresented}>
      <Sheet.Portal>
        <Sheet.View>
          <Sheet.Backdrop />
          <Sheet.Content>
            <Sheet.Title>Controlled Sheet</Sheet.Title>
            <Sheet.Description>This sheet is controlled by state.</Sheet.Description>
          </Sheet.Content>
        </Sheet.View>
      </Sheet.Portal>
    </Sheet.Root>
  );
}

These props come with some limitations at the moment. Read more about the presented and onPresentedChange props on the Sheet documentation page.

The activeDetent and onActiveDetent props