Components / Drawer

Drawer

A dialog that slides in from an edge of the screen: the Vaul pattern, dependency-free. Same brain as the Dialog (focus trap, scroll lock, Esc / backdrop dismissal, portalled to the document body), plus a drag-handle bar and real drag-to-dismiss: grab the sheet and drag it past 25% of its length toward the edge to close.

Examples

Grab the handle bar at the top of the sheet (or anywhere on it) and drag down (past a quarter of its height) to dismiss; release short of that and the engine eases it back. A tap inside is ignored, so the body stays interactive. Esc and a backdrop click close it too.

razor

<ZitsDrawer>
    <ZitsDrawerTrigger>Open Drawer</ZitsDrawerTrigger>
    <ZitsDrawerContent>
        <div class="mx-auto w-full max-w-sm">
            <ZitsDrawerHeader>
                <ZitsDrawerTitle>Move goal</ZitsDrawerTitle>
                <ZitsDrawerDescription>Set your daily activity goal.</ZitsDrawerDescription>
            </ZitsDrawerHeader>
            <div class="flex items-center justify-center gap-4 p-4">
                <ZitsButton Variant="outline" class="h-10 w-10 rounded-full p-0" @onclick="() => _goal -= 10">−</ZitsButton>
                <div class="text-center">
                    <div class="text-5xl font-bold tracking-tighter">@_goal</div>
                    <div class="text-xs uppercase text-muted-foreground">Calories/day</div>
                </div>
                <ZitsButton Variant="outline" class="h-10 w-10 rounded-full p-0" @onclick="() => _goal += 10">+</ZitsButton>
            </div>
            <ZitsDrawerFooter>
                <ZitsButton>Submit</ZitsButton>
            </ZitsDrawerFooter>
        </div>
    </ZitsDrawerContent>
</ZitsDrawer>

@code {
    private int _goal = 350;
}

Directions

Set Direction to dock the sheet to any edge: bottom (default), top, left, or right. The handle and the drag axis follow the edge, so a right sheet is dragged rightward to dismiss.

razor

@* Direction docks the sheet to an edge; the drag axis follows it. *@
<ZitsDrawer Direction="right">
    <ZitsDrawerTrigger>Right</ZitsDrawerTrigger>
    <ZitsDrawerContent>
        <div class="mx-auto w-full max-w-sm">
            <ZitsDrawerHeader>
                <ZitsDrawerTitle>Right drawer</ZitsDrawerTitle>
                <ZitsDrawerDescription>Docked to the right edge; drag it rightward past 25% to dismiss.</ZitsDrawerDescription>
            </ZitsDrawerHeader>
            <ZitsDrawerFooter>
                <ZitsButton>Submit</ZitsButton>
                <NaviusDrawerClose>Cancel</NaviusDrawerClose>
            </ZitsDrawerFooter>
        </div>
    </ZitsDrawerContent>
</ZitsDrawer>

@* Swap Direction for "top" | "bottom" | "left" to dock to the other edges. *@

Anatomy

Compose the parts: a trigger and the portalled content (slides in from the Direction edge, with its drag-handle bar), plus header / footer slots.

razor

ZitsDrawer                     (Direction: bottom | top | left | right)
├── ZitsDrawerTrigger
└── ZitsDrawerContent          (portalled, focus-trapped, drag-to-dismiss, drag-handle bar)
    ├── ZitsDrawerHeader
    │   ├── ZitsDrawerTitle
    │   └── ZitsDrawerDescription
    └── ZitsDrawerFooter

Installation

Terminal bash

navius add drawer

API reference

ZitsDrawer (root). Direction accepts bottom · top · left · right; Open supports @bind-Open.

Prop	Type	Default
Direction	string	"bottom"
Open	bool	false
OpenChanged	EventCallback<bool>	-
DefaultOpen	bool	false
Modal	bool	true