Sheet

A panel that slides out from the edge of the screen. Useful for navigation, details, or editing forms.

Basic

A simple sheet that slides in from the right.

<Sheet @bind-Open="sheetOpen">
    <SheetTrigger>
        <Button>Open Sheet</Button>
    </SheetTrigger>
    <SheetContent Side="SheetSide.Right">
        <SheetHeader>
            <SheetTitle>Edit profile</SheetTitle>
            <SheetDescription>
                Make changes to your profile here.
            </SheetDescription>
        </SheetHeader>
        <SheetBody>
            <div class="grid gap-4 py-4">
                <div class="grid grid-cols-4 items-center gap-4">
                    <Label Class="text-right">Name</Label>
                    <Input Class="col-span-3" Placeholder="Pedro Duarte" />
                </div>
            </div>
        </SheetBody>
        <SheetFooter>
            <SheetClose>
                <Button Variant="ButtonVariant.Outline">Cancel</Button>
            </SheetClose>
            <Button>Save changes</Button>
        </SheetFooter>
    </SheetContent>
</Sheet>

Side

Use the Side property to control the direction the Sheet slides in from.

@foreach (var side in Enum.GetValues<SheetSide>())
{
    <Sheet @bind-Open="sideStates[side]">
        <SheetTrigger>
            <Button Variant="ButtonVariant.Outline">@side</Button>
        </SheetTrigger>
        <SheetContent Side="@side">
            <SheetHeader>
                <SheetTitle>@side Sheet</SheetTitle>
                <SheetDescription>
                    This sheet slides in from the @side.
                </SheetDescription>
            </SheetHeader>
            <SheetBody>
                <p>Content goes here.</p>
            </SheetBody>
            <SheetFooter>
                <SheetClose>
                    <Button>Close</Button>
                </SheetClose>
            </SheetFooter>
        </SheetContent>
    </Sheet>
}

Scrollable Content

Use SheetBody to create a scrollable area for long content. The footer stays at the bottom.

<Sheet @bind-Open="scrollableOpen">
    <SheetTrigger>
        <Button Variant="ButtonVariant.Outline">Scrollable Sheet</Button>
    </SheetTrigger>
    <SheetContent Side="SheetSide.Right">
        <SheetHeader>
            <SheetTitle>Terms of Service</SheetTitle>
            <SheetDescription>Please read the following terms.</SheetDescription>
        </SheetHeader>
        <SheetBody>
            @for (int i = 0; i < 30; i++)
            {
                <p class="mb-4 text-sm">
                    Long content that will scroll...
                </p>
            }
        </SheetBody>
        <SheetFooter>
            <Button>Accept</Button>
        </SheetFooter>
    </SheetContent>
</Sheet>