Always Light Always Dark System

Sheet

Drawers or modals

Manage Channels
<Button primary action={ () => openSheet = !openSheet }>Manage Channels</Button>

<Sheet bind:open={openSheet} title="Manage Channels">
	Detailed content or actions! Click or tap outside to dismiss.
</Sheet>
Detailed content or actions! Click or tap outside to dismiss.

This is more analogous to the SwiftUI Sheet than the Shadcn Sheet. The idea is to show a centered panel on tablets and desktops but have a bottom-aligned drawer for mobile views. Show and hide using a bound boolean value.

Note that a Sheet will be tied to whatever container it is declared in. For example: on this page, the actual Sheet component is declared outside of the ComponentDemo component; otherwise, it will display inside the demo container.