A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
<Dialog>
<DialogTrigger>
<Button Variant="@Button.ButtonVariant.Outline">Open Dialog</Button>
</DialogTrigger>
<DialogContent Class="sm:max-w-sm">
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
Make changes to your profile here. Click save when you're done.
</DialogDescription>
</DialogHeader>
<div class="grid gap-4">
<div class="grid gap-2">
<Label For="dialog-demo-name">Name</Label>
<Input id="dialog-demo-name" Value="Pedro Duarte" />
</div>
<div class="grid gap-2">
<Label For="dialog-demo-username">Username</Label>
<Input id="dialog-demo-username" Value="@peduarte" />
</div>
</div>
<DialogFooter>
<DialogClose>
<Button Variant="@Button.ButtonVariant.Outline">Cancel</Button>
</DialogClose>
<Button>Save changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>Installation
Install the dialog component using the command or manual steps.
blazor-shadcn add dialogUsage
@using ShadcnBlazor.Components.UI<Dialog>
<DialogTrigger>
<Button Variant="@Button.ButtonVariant.Outline">Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
Make changes to your profile here. Click save when you're done.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>Examples
Close Button
<Dialog>
<DialogTrigger>
<Button Variant="@Button.ButtonVariant.Outline">Share</Button>
</DialogTrigger>
<DialogContent Class="sm:max-w-md">
<DialogHeader>
<DialogTitle>Share link</DialogTitle>
<DialogDescription>
Anyone who has this link will be able to view this.
</DialogDescription>
</DialogHeader>
<div class="flex items-center gap-2">
<div class="grid flex-1 gap-2">
<Label For="dialog-share-link" Class="sr-only">Link</Label>
<Input id="dialog-share-link" Value="https://ui.shadcn.com/docs/installation" />
</div>
</div>
<DialogFooter Class="sm:justify-start">
<DialogClose>
<Button Type="button">Close</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>No Close Button
<Dialog>
<DialogTrigger>
<Button Variant="@Button.ButtonVariant.Outline">No Close Button</Button>
</DialogTrigger>
<DialogContent ShowCloseButton="false">
<DialogHeader>
<DialogTitle>No Close Button</DialogTitle>
<DialogDescription>
This dialog doesn't have a close button in the top-right corner.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>Scrollable Content
<Dialog>
<DialogTrigger>
<Button Variant="@Button.ButtonVariant.Outline">Scrollable Content</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Scrollable Content</DialogTitle>
<DialogDescription>
This is a dialog with scrollable content.
</DialogDescription>
</DialogHeader>
<div class="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
@foreach (var paragraph in _paragraphs)
{
<p class="mb-4 leading-normal">@paragraph</p>
}
</div>
</DialogContent>
</Dialog>
@code {
private readonly string[] _paragraphs =
[
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.",
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.",
"Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus.",
"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna.",
"Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in.",
"Donec sed odio dui. Sed posuere consectetur est at lobortis.",
"Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
];
}Sticky Footer
<Dialog>
<DialogTrigger>
<Button Variant="@Button.ButtonVariant.Outline">Sticky Footer</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Sticky Footer</DialogTitle>
<DialogDescription>
This dialog has a sticky footer that stays visible while the content scrolls.
</DialogDescription>
</DialogHeader>
<div class="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
@foreach (var paragraph in _paragraphs)
{
<p class="mb-4 leading-normal">@paragraph</p>
}
</div>
<DialogFooter>
<DialogClose>
<Button Variant="@Button.ButtonVariant.Outline">Close</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
@code {
private readonly string[] _paragraphs =
[
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.",
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.",
"Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus.",
"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna.",
"Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in.",
"Donec sed odio dui. Sed posuere consectetur est at lobortis.",
"Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
];
}