<div class="flex items-center justify-center py-10 min-h-[240px]">
<Popover>
<PopoverTrigger>
<Button Variant="@Button.ButtonVariant.Outline">Open popover</Button>
</PopoverTrigger>
<PopoverContent Class="w-80">
<div class="grid gap-4">
<div class="space-y-2">
<h4 class="leading-none font-medium">Dimensions</h4>
<p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
</div>
<div class="grid gap-2">
<div class="grid grid-cols-3 items-center gap-4">
<Label For="popover-demo-width">Width</Label>
<Input id="popover-demo-width" Value="100%" Class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label For="popover-demo-max-width">Max. width</Label>
<Input id="popover-demo-max-width" Value="300px" Class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label For="popover-demo-height">Height</Label>
<Input id="popover-demo-height" Value="25px" Class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label For="popover-demo-max-height">Max. height</Label>
<Input id="popover-demo-max-height" Value="none" Class="col-span-2 h-8" />
</div>
</div>
</div>
</PopoverContent>
</Popover>
</div>Installation
Install the popover component using the command or manual steps.
blazor-shadcn add popoverUsage
@using BlazorShadcn.Components.UI<Popover>
<PopoverTrigger>
<Button Variant="@Button.ButtonVariant.Outline">Open Popover</Button>
</PopoverTrigger>
<PopoverContent Align="start" Class="w-80">
<div class="grid gap-4">
<div class="space-y-2">
<h4 class="leading-none font-medium">Dimensions</h4>
<p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
</div>
<div class="grid gap-2">
<div class="grid grid-cols-3 items-center gap-4">
<Label For="popover-width">Width</Label>
<Input id="popover-width" Value="100%" Class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label For="popover-max-width">Max. width</Label>
<Input id="popover-max-width" Value="300px" Class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label For="popover-height">Height</Label>
<Input id="popover-height" Value="25px" Class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label For="popover-max-height">Max. height</Label>
<Input id="popover-max-height" Value="none" Class="col-span-2 h-8" />
</div>
</div>
</div>
</PopoverContent>
</Popover>Examples
Basic
A popover with editable dimensions.
<div class="flex items-center justify-center py-10 min-h-[240px]">
<Popover>
<PopoverTrigger>
<Button Variant="@Button.ButtonVariant.Outline">Open Popover</Button>
</PopoverTrigger>
<PopoverContent Align="start" Class="w-80">
<div class="grid gap-4">
<div class="space-y-2">
<h4 class="leading-none font-medium">Dimensions</h4>
<p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
</div>
<div class="grid gap-2">
<div class="grid grid-cols-3 items-center gap-4">
<Label For="popover-basic-width">Width</Label>
<Input id="popover-basic-width" Value="100%" Class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label For="popover-basic-max-width">Max. width</Label>
<Input id="popover-basic-max-width" Value="300px" Class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label For="popover-basic-height">Height</Label>
<Input id="popover-basic-height" Value="25px" Class="col-span-2 h-8" />
</div>
<div class="grid grid-cols-3 items-center gap-4">
<Label For="popover-basic-max-height">Max. height</Label>
<Input id="popover-basic-max-height" Value="none" Class="col-span-2 h-8" />
</div>
</div>
</div>
</PopoverContent>
</Popover>
</div>Align
Use the Align parameter on PopoverContent to control the horizontal alignment.
<div class="flex items-center justify-center py-10 min-h-[240px]">
<div class="flex flex-wrap justify-center gap-6">
<Popover>
<PopoverTrigger>
<Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Sm">Start</Button>
</PopoverTrigger>
<PopoverContent Align="start" Class="w-40">
Aligned to start
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger>
<Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Sm">Center</Button>
</PopoverTrigger>
<PopoverContent Align="center" Class="w-40">
Aligned to center
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger>
<Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Sm">End</Button>
</PopoverTrigger>
<PopoverContent Align="end" Class="w-40">
Aligned to end
</PopoverContent>
</Popover>
</div>
</div>With Form
A popover with form fields inside.
<div class="flex items-center justify-center py-10 min-h-[240px]">
<Popover>
<PopoverTrigger>
<Button Variant="@Button.ButtonVariant.Outline">Open Popover</Button>
</PopoverTrigger>
<PopoverContent Align="start" Class="w-80">
<PopoverHeader>
<PopoverTitle>Dimensions</PopoverTitle>
<PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
</PopoverHeader>
<div class="grid gap-4">
<div class="grid grid-cols-[1fr_1fr] items-center gap-4">
<Label For="popover-form-width">Width</Label>
<Input id="popover-form-width" Value="100%" />
</div>
<div class="grid grid-cols-[1fr_1fr] items-center gap-4">
<Label For="popover-form-max-width">Max. width</Label>
<Input id="popover-form-max-width" Value="300px" />
</div>
<div class="grid grid-cols-[1fr_1fr] items-center gap-4">
<Label For="popover-form-height">Height</Label>
<Input id="popover-form-height" Value="25px" />
</div>
<div class="grid grid-cols-[1fr_1fr] items-center gap-4">
<Label For="popover-form-max-height">Max. height</Label>
<Input id="popover-form-max-height" Value="none" />
</div>
</div>
</PopoverContent>
</Popover>
</div>API Reference
See the Base UI Popover documentation for the original surface. This Blazor port supports the common composition primitives plus Align, Side, and dir on PopoverContent.