Sheet Component

Extends the Dialog component to display content that complements the main content of the screen.

AsChild Pattern

Use AsChild to compose triggers with your own styled Button components.

Without AsChild

SheetTrigger renders its own button with inline classes.

With AsChild

Button receives trigger behavior via TriggerContext.

Side: Right (Default)

A sheet that slides in from the right side of the screen.

Side: Top

A sheet that slides in from the top of the screen.

Side: Bottom

A sheet that slides in from the bottom of the screen.

Side: Left

A sheet that slides in from the left side of the screen.

Controlled Sheet

Control the sheet state programmatically using @bind-Open.

Without Close Button

Hide the default close button using ShowClose="false".

Custom Width

Customize the sheet width using the Class parameter.

Features

Slides in from any side (top, right, bottom, left)
Full keyboard navigation support
Focus is automatically trapped within the sheet
Can be controlled or uncontrolled
Manages screen reader announcements with ARIA
Scroll lock on body when sheet is open
Smooth slide animations with fade overlay
Respects prefers-reduced-motion

Installation

Add the following using statement to your _Imports.razor:

@using BlazorUI.Components.Sheet

Usage

<Sheet>
    <SheetTrigger>
        <Button>Open</Button>
    </SheetTrigger>
    <SheetContent>
        <SheetHeader>
            <SheetTitle>Edit profile</SheetTitle>
            <SheetDescription>
                Make changes to your profile here.
            </SheetDescription>
        </SheetHeader>
        <SheetFooter>
            <Button>Save</Button>
        </SheetFooter>
    </SheetContent>
</Sheet>

Different Sides

<Sheet Side="SheetSide.Left">
    <!-- Content slides in from left -->
</Sheet>

<Sheet Side="SheetSide.Right">
    <!-- Content slides in from right (default) -->
</Sheet>

<Sheet Side="SheetSide.Top">
    <!-- Content slides in from top -->
</Sheet>

<Sheet Side="SheetSide.Bottom">
    <!-- Content slides in from bottom -->
</Sheet>