A shadcn/ui inspired Blazor component library

Installation

Add the Dialog component using the CLI:

shadcnblazor component add dialog

Usage

ShadcnBlazor supports two dialog APIs: imperative (via IDialogService.Show<T>()) and declarative (via DialogRoot, DialogTrigger, DialogContent, etc.). For imperative dialogs, add DialogProvider to your layout, inject IDialogService, and call Show<YourDialogComponent>(title, parameters, options). The declarative API mirrors shadcn/ui React: nest DialogTrigger and DialogContent inside DialogRoot.

Declarative

Compose dialogs inline with DialogRoot, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, and DialogClose.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<DialogRoot>
    <form>
        <DialogTrigger>
            <Button Variant="@Variant.Default">Open Dialog</Button>
        </DialogTrigger>
        <DialogContent MaxWidth="444px" 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 py-4">
                <div class="grid gap-2">
                    <label for="name" class="text-sm font-medium">Name</label>
                    <Input id="name" @bind-Value="_name" placeholder="Pedro Duarte" />
                </div>
                <div class="grid gap-2">
                    <label for="username" class="text-sm font-medium">Username</label>
                    <Input id="username" @bind-Value="_username" placeholder="@_usernamePlaceholder" />
                </div>
            </div>
            <DialogFooter>
                <DialogClose>
                    <Button Variant="@Variant.Secondary">Cancel</Button>
                </DialogClose>
                <Button Variant="@Variant.Default" OnClick="OnSave">Save changes</Button>
            </DialogFooter>
        </DialogContent>
    </form>
</DialogRoot>

@code {
    private string _name = "Pedro Duarte";
    private string _username = "@peduarte";
    private readonly string _usernamePlaceholder = "@peduarte";

    [CascadingParameter]
    private DeclarativeDialogContext? DialogContext { get; set; }

    private async Task OnSave()
    {
        if (DialogContext != null)
            await DialogContext.CloseAsync();
    }
}

Single file

Trigger and dialog content in one place. The dialog content component is defined in the code-behind of the same example.

1

2

3

4

5

6

7

8

9

10

11

<Button Variant="@Variant.Default" OnClick="OpenDialog">Open Dialog</Button>

@code {
    [Inject]
    private IDialogService DialogService { get; set; } = null!;

    private void OpenDialog()
    {
        DialogService.Show<SingleFileDialogContent>("Confirm");
    }
}

Two files

Trigger and dialog content in separate files. The trigger calls Show<Dialog>; the dialog content lives in its own component.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<Button Variant="@Variant.Default" OnClick="OpenDialog">Open Dialog</Button>

@code {
    [Inject]
    private IDialogService DialogService { get; set; } = null!;

    private void OpenDialog()
    {
        var parameters = new DialogParameters
        {
            { nameof(Dialog.Name), "Jane" }
        };
        DialogService.Show<Dialog>("Edit", parameters);
    }
}

API Reference

DialogProvider

Provider component that hosts dialogs shown via . Required for imperative dialogs to work.

Methods

Method	Returns	Description
`Dispose`	`void`
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.