v0.3.0-alpha.2 adds SheetTrigger and SheetContent subcomponents. Side is set on <Sheet> itself. Use @bind-Open when you need to control open state externally (e.g. a close button inside the content).

What changed from v0.2.x

v0.2.1	v0.3.0-alpha.2
`<Button OnClick="() => isOpen = true">` + `<Sheet IsOpen="@isOpen" ...>`	`<Sheet Side="..."><SheetTrigger>Open</SheetTrigger><SheetContent>...</SheetContent></Sheet>`
Requires external open state field	No external state needed (or opt-in via `@bind-Open`)

Installation

shellui add sheet

Usage

Basic

<Sheet Side="SheetSide.Right">
    <SheetTrigger>
        <Button Variant="ButtonVariant.Outline">Open Sheet</Button>
    </SheetTrigger>
    <SheetContent>
        <div class="space-y-4">
            <h3 class="text-lg font-medium">Settings</h3>
            <p class="text-sm text-muted-foreground">Manage your account settings.</p>
        </div>
    </SheetContent>
</Sheet>

With external open control (`@bind-Open`)

<Sheet @bind-Open="_sheetOpen" Side="SheetSide.Right">
    <SheetTrigger>
        <Button Variant="ButtonVariant.Outline">Open Sheet</Button>
    </SheetTrigger>
    <SheetContent>
        <h4 class="font-semibold">Sheet Title</h4>
        <p class="text-sm text-muted-foreground">Sheet content here.</p>
        <Button @onclick="() => _sheetOpen = false">Close</Button>
    </SheetContent>
</Sheet>

@code {
    private bool _sheetOpen = false;
}

<Sheet Side="SheetSide.Left">
    <SheetTrigger>
        <Button Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </Button>
    </SheetTrigger>
    <SheetContent>
        <nav class="space-y-2 pt-4">
            <a href="/dashboard" class="block rounded-md px-3 py-2 hover:bg-accent">Dashboard</a>
            <a href="/settings" class="block rounded-md px-3 py-2 hover:bg-accent">Settings</a>
        </nav>
    </SheetContent>
</Sheet>

API Reference

`<Sheet>`

Parameter	Type	Default	Description
`Side`	`SheetSide`	`Right`	Which edge the panel slides from
`Open`	`bool`	`false`	Bind with `@bind-Open` to control open state externally
`OpenChanged`	`EventCallback<bool>`	—	Fires when open state changes
`ChildContent`	`RenderFragment`	—	`SheetTrigger` + `SheetContent`

`<SheetTrigger>`

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment`	—	Trigger button content

`<SheetContent>`

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment`	—	Panel body content

`SheetSide` enum

Left · Right · Top · Bottom

Sheet