Silk components are made up of several sub-components, most of which render one or several underlying HTML elements. Silk allows to easily substitute those underlying HTML elements with your own HTML elements or React components.
The asChild prop is available on all sub-components rendering an underlying HTML elements.
When present (i.e. set to true) the sub-component expects exactly one child (with any number of descendants). It can be either an HTML element, or a React component rendering one HTML element, and will be used in lieu of the default underlying HTML element.
When in use, the HTML element normally rendered by the sub-component will not be rendered. Instead, the HTML element received as child will be used, and it will receive automatically the HTML attributes required for the proper functioning of the Silk sub-component.
When used with an HTML element, all you need to do is set the asChild prop on the Silk sub-component, and pass the HTML element as child of this sub-component.
<Sheet.Trigger asChild>
<a href="/my-page">Open the sheet</a>
</Sheet.Trigger>
When used with a React component, the process is similar, but it requires an additional step. First, you need the React component to accept props and spread them onto the underlying HTML element.
// MyButton.tsx
const MyButton = (props) => <button {...props} />;
Then, you can to set the asChild prop on the Silk sub-component, and pass the React component as child of this sub-component.