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: you need to set the asChild prop on the Silk sub-component, and pass the React component as child of this sub-component.
Secondly, you need the React component to accept props and a ref and spread them onto the underlying HTML element, as well as use forwardRef so your component properly forwards the ref.
// MyButton.tsx
const MyButton = React.forwardRef((props, forwardedRef) =>
<button ref={forwardedRef} {...props}>
);
// Usage
<Sheet.Trigger asChild>
<MyButton>Open the sheet</MyButton>
</Sheet.Trigger>