Sheet
A panel that slides out from the edge of the screen
Divergence from Blok
Trigger collapsed into Open binding; built-in close button. Blok exports SheetTrigger, SheetClose, and SheetContent as siblings around the root. We collapse trigger and content into <Sheet Open Side> — drive open/close with Open/OpenChanged two-way binding, and the content panel includes a hardcoded close button (matches Blok's default content template). SheetHeader, SheetFooter, SheetTitle, SheetDescription, and SheetClose remain for composition inside the panel. No focus trap, no Esc-to-close (Blok gets those via Radix).
Examples
Right side (default)
Sheet content goes here. You can put any content inside.
Left side
Navigation content here.
Top
Top sheet content. Useful for notifications or alerts.
Bottom
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Sheet | Sliding panel anchored to one edge of the viewport. Drives open / close with Open + OpenChanged, renders its own overlay, and includes a built-in close button. |
| SheetHeader | Vertical stack that sits at the top of the sheet. Usually contains SheetTitle and SheetDescription. |
| SheetTitle | Semibold heading placed inside the SheetHeader. |
| SheetDescription | Muted subheading paragraph placed inside the SheetHeader. |
| SheetFooter | Flex row aligned to the right, anchored at the bottom of the sheet. Host for confirmation and cancel actions. |
| SheetClose | Optional additional close button you can place anywhere inside the sheet. Note: the sheet already renders a hardcoded close button at the top-right. |
Sheet
Sliding panel anchored to one edge of the viewport. Drives open / close with Open + OpenChanged, renders its own overlay, and includes a built-in close button.
| Property | Type | Required | Description |
|---|---|---|---|
| Open | bool | Whether the sheet is currently open. Use @bind-Open for two-way binding. Default: false. | |
| OpenChanged | EventCallback<bool> | Fires when the sheet is dismissed (overlay click or built-in close). Part of the @bind-Open pair. | |
| Side | SheetSide | Edge to slide from. Default: SheetSide.Right. Other values: Left, Top, Bottom. | |
| ClassName | string? | Extra CSS classes appended to the sheet content container. | |
| ChildContent | RenderFragment? | Sheet body. Typically SheetHeader + content + optional SheetFooter. |
SheetHeader
Vertical stack that sits at the top of the sheet. Usually contains SheetTitle and SheetDescription.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the header container. | |
| ChildContent | RenderFragment? | Heading content. |
SheetTitle
Semibold heading placed inside the SheetHeader.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the title container. | |
| ChildContent | RenderFragment? | Title text. |
SheetDescription
Muted subheading paragraph placed inside the SheetHeader.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the description container. | |
| ChildContent | RenderFragment? | Description text. |
SheetFooter
Flex row aligned to the right, anchored at the bottom of the sheet. Host for confirmation and cancel actions.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the footer container. | |
| ChildContent | RenderFragment? | Footer content — typically one or more Buttons. |
SheetClose
Optional additional close button you can place anywhere inside the sheet. Note: the sheet already renders a hardcoded close button at the top-right.
| Property | Type | Required | Description |
|---|---|---|---|
| Click | EventCallback | Invoked when the close button is clicked. Wire this to set your Open flag to false. | |
| ClassName | string? | Extra CSS classes appended to the button. | |
| ChildContent | RenderFragment? | Button content — typically an icon or label. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <button>. |