ShadCn.Blazor

https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/
Admin
ShadCn.Blazor is a Blazor component library inspired by shadcn/ui that provides accessible,...
Tokens:28,830
Snippets:338
Trust Score:7.4
Update:3 months ago
Show doc for...
Tokens:
Raw
### Quick Start Bar Chart Example

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/charts

A basic example demonstrating how to create a bar chart with two data series (Desktop and Mobile) using the ChartContainer, BarChart, and related components. Ensure chart configuration and data are correctly defined before use.

```csharp
var chartConfig = new ChartConfig
{
    ["desktop"] = new ChartConfigEntry
    {
        Label = "Desktop",
        Color = "hsl(var(--chart-1))"
    },
    ["mobile"] = new ChartConfigEntry
    {
        Label = "Mobile",
        Color = "hsl(var(--chart-2))"
    }
};

var chartData = new List<Dictionary<string, object>>
{
    new() { ["month"] = "January",  ["desktop"] = 186, ["mobile"] = 80 },
    new() { ["month"] = "February", ["desktop"] = 305, ["mobile"] = 200 },
    new() { ["month"] = "March",    ["desktop"] = 237, ["mobile"] = 120 },
    new() { ["month"] = "April",    ["desktop"] = 73,  ["mobile"] = 190 },
    new() { ["month"] = "May",      ["desktop"] = 209, ["mobile"] = 130 },
    new() { ["month"] = "June",     ["desktop"] = 214, ["mobile"] = 140 },
}.Cast<object>().ToList();
```

```razor
<ChartContainer Config="@chartConfig" Class="h-[300px]">
    <BarChart Data="@chartData" XDataKey="month">
        <CartesianGrid Vertical="false" />
        <XAxis TickLine="false" AxisLine="false" />
        <YAxis TickLine="false" AxisLine="false" />
        <Bar DataKey="desktop" Fill="var(--color-desktop)" Radius="4" />
        <Bar DataKey="mobile" Fill="var(--color-mobile)" Radius="4" />
        <ChartTooltip />
    </BarChart>
    <ChartLegend />
</ChartContainer>
```

--------------------------------

### Install ShadCn.Blazor via .NET CLI

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/installation

Use the .NET CLI to add the ShadCn.Blazor.Components package to your project.

```bash
dotnet add package ShadCn.Blazor.Components
```

--------------------------------

### Success and Tip Alerts

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/alert

Examples of alerts for success messages and helpful tips. The tip example demonstrates inline HTML elements like <kbd>.

```razor
<Alert>
    <AlertTitle>Success!</AlertTitle>
    <AlertDescription>
        Your payment was processed successfully.
    </AlertDescription>
</Alert>

<Alert>
    <AlertTitle>Tip</AlertTitle>
    <AlertDescription>
        Press <kbd>Ctrl + K</kbd> to open the command menu.
    </AlertDescription>
</Alert>
```

--------------------------------

### Install ShadCn.Blazor via Package Manager Console

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/installation

Use the Package Manager Console in Visual Studio to install the ShadCn.Blazor.Components package.

```powershell
Install-Package ShadCn.Blazor.Components
```

--------------------------------

### Configure First Day of Week

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/calendar

Customize the starting day of the week for the calendar view. Examples show setting Monday and Sunday as the first day.

```razor
@* Start week on Monday (European style) *@
<Calendar FirstDayOfWeek="DayOfWeek.Monday" />

@* Start week on Sunday (US style) *@
<Calendar FirstDayOfWeek="DayOfWeek.Sunday" />
```

--------------------------------

### Example Usage of ShadCn.Blazor Components

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/installation

Demonstrates how to use Button, Card, and Alert components in your Blazor pages or components.

```razor
<Button>Click me</Button>

<Card>
    <CardHeader>
        <CardTitle>Welcome</CardTitle>
        <CardDescription>Get started with ShadCn.Blazor</CardDescription>
    </CardHeader>
    <CardContent>
        <p>Your content here</p>
    </CardContent>
</Card>

<Alert>
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>You can customize all components.</AlertDescription>
</Alert>
```

--------------------------------

### FAQ Accordion Example

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/accordion

A common use case for accordions is to create a FAQ section. This example uses Collapsible="true" to allow all items to be closed.

```html
<Accordion Type="AccordionType.Single" Collapsible="true" Class="w-full">
    <AccordionItem Value="faq-1">
        <AccordionTrigger>How do I reset my password?</AccordionTrigger>
        <AccordionContent>
            Click on 'Forgot Password' on the login page...
        </AccordionContent>
    </AccordionItem>
    <AccordionItem Value="faq-2">
        <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>
        <AccordionContent>
            We accept all major credit cards...
        </AccordionContent>
    </AccordionItem>
</Accordion>
```

--------------------------------

### Basic Dialog Example

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/dialog

A simple dialog with a title, description, and action buttons. Use the @bind-Open attribute to control visibility.

```razor
<Dialog @bind-Open="dialogOpen">
    <DialogTrigger>
        <Button>Open Dialog</Button>
    </DialogTrigger>
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Are you sure?</DialogTitle>
            <DialogDescription>
                This action cannot be undone.
            </DialogDescription>
        </DialogHeader>
        <DialogFooter>
            <Button Variant="ButtonVariant.Outline">Cancel</Button>
            <Button>Continue</Button>
        </DialogFooter>
    </DialogContent>
</Dialog>
```

--------------------------------

### Basic Popover Example

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/popover

Use this snippet to display a popover with predefined content when a button is clicked. Ensure the Button and Popover components are correctly imported.

```razor
<Popover>
    <PopoverTrigger>
        <Button Variant="ButtonVariant.Outline">Open popover</Button>
    </PopoverTrigger>
    <PopoverContent>
        <div class="grid gap-4">
            <div class="space-y-2">
                <h4 class="font-medium leading-none">Dimensions</h4>
                <p class="text-sm text-muted-foreground">
                    Set the dimensions for the layer.
                </p>
            </div>
            <div class="grid gap-2">
                <div class="grid grid-cols-3 items-center gap-4">
                    <Label>Width</Label>
                    <Input Class="col-span-2 h-8" />
                </div>
            </div>
        </div>
    </PopoverContent>
</Popover>
```

--------------------------------

### Badge Usage Examples

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/badge

Illustrates how to use the Badge component to annotate statuses or counts within a UI. Different variants can be applied based on the context.

```html
<div class="flex items-center gap-2">
    <span>Status:</span>
    <Badge>Active</Badge>
</div>
<div class="flex items-center gap-2">
    <span>Notifications:</span>
    <Badge Variant="BadgeVariant.Destructive">5</Badge>
</div>
<div class="flex items-center gap-2">
    <span>Version:</span>
    <Badge Variant="BadgeVariant.Outline">v1.0.0</Badge>
</div>
```

--------------------------------

### Button Sizes

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/button

Illustrates how to adjust the size of the Button component using the Size property. Includes an example for icon-only buttons.

```html
<Button Size="ButtonSize.Sm">Small</Button>
<Button Size="ButtonSize.Default">Default</Button>
<Button Size="ButtonSize.Lg">Large</Button>
<Button Size="ButtonSize.Icon">...</Button>
```

--------------------------------

### Input Group with Inline Start Addon

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/input-group

Use Align="InputGroupAlign.InlineStart" to position the addon before the input. This is the default behavior.

```razor
<InputGroup>
    <InputGroupInput Placeholder="Email address" Type="email" />
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <InputGroupText>
            <!-- Mail icon -->
            <svg>...</svg>
        </InputGroupText>
    </InputGroupAddon>
</InputGroup>
```

--------------------------------

### Basic Accordion Example

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/accordion

A basic accordion where only one item can be open at a time. The first item is open by default.

```html
<Accordion Type="AccordionType.Single" DefaultValue="item-1" Class="w-full">
    <AccordionItem Value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
            Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
    </AccordionItem>
    <AccordionItem Value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
            Yes. It comes with default styles that match the other components.
        </AccordionContent>
    </AccordionItem>
    <AccordionItem Value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
            Yes. It's animated by default, but you can disable it if you prefer.
        </AccordionContent>
    </AccordionItem>
</Accordion>
```

--------------------------------

### Calendar with Preselected Date

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/calendar

Initialize the calendar with a specific date already selected. This example preselects today's date.

```razor
<Calendar @bind-SelectedDate="selectedDate" />

@code {
    private DateTime? selectedDate = DateTime.Today;
}
```

--------------------------------

### Textarea Input Group with Block Start Addon

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/input-group

Use block-start alignment to position addons, such as icons and descriptive text, above the textarea.

```razor
<InputGroup>
    <InputGroupTextarea Placeholder="Write a comment..." Rows="3" />
    <InputGroupAddon Align="InputGroupAlign.BlockStart">
        <InputGroupText>
            <!-- MessageSquare icon -->
            <svg>...</svg>
        </InputGroupText>
        <span class="text-xs">Comment</span>
    </InputGroupAddon>
</InputGroup>
```

--------------------------------

### Input Group with Static Text Addons

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/input-group

Display static text like currency symbols or prefixes using InputGroupText within addons. Shows examples for currency and username inputs.

```razor
<!-- Currency input -->
<InputGroup>
    <InputGroupInput Placeholder="0.00" Type="number" />
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <InputGroupText>$</InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon Align="InputGroupAlign.InlineEnd">
        <InputGroupText>.00</InputGroupText>
    </InputGroupAddon>
</InputGroup>

<!-- Username input -->
<InputGroup>
    <InputGroupInput Placeholder="username" />
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <InputGroupText>@@</InputGroupText>
    </InputGroupAddon>
</InputGroup>
```

--------------------------------

### Basic Toast Notification

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/sonner

Trigger a basic toast notification using the injected `ISonnerService`. This example shows how to display a default toast with a title and description, and a destructive toast.

```csharp
@inject ISonnerService SonnerService

<Sonner />

<Button OnClick="ShowDefault">Show toast</Button>
<Button Variant="ButtonVariant.Outline" OnClick="ShowDestructive">Destructive</Button>

@code {
    private void ShowDefault(MouseEventArgs _)
    {
        SonnerService.Show("Scheduled", "Friday, February 10 at 5:57 PM.");
    }

    private void ShowDestructive(MouseEventArgs _)
    {
        SonnerService.Show("Uh oh!", "Something went wrong.", SonnerToastVariant.Destructive);
    }
}
```

--------------------------------

### Switch in a Settings Form

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/switch

Integrate the Switch component within a settings form to manage user preferences. This example shows how to associate a label and descriptive text with the switch.

```razor
<div class="flex items-center justify-between">
    <div class="space-y-0.5">
        <Label>Marketing emails</Label>
        <p class="text-sm text-muted-foreground">Receive emails about new products.</p>
    </div>
    <Switch @bind-Checked="marketing" />
</div>
```

--------------------------------

### Card for Notifications

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/card

An example of using cards to group related notification items. Each notification includes a status indicator, title, and timestamp.

```html
<Card Class="max-w-md">
    <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>You have 3 unread messages.</CardDescription>
    </CardHeader>
    <CardContent>
        <div class="space-y-4">
            <div class="flex items-start gap-4">
                <div class="h-2 w-2 rounded-full bg-primary mt-2"></div>
                <div class="space-y-1">
                    <p class="text-sm font-medium">Your call has been confirmed.</p>
                    <p class="text-sm text-muted-foreground">1 hour ago</p>
                </div>
            </div>
            <div class="flex items-start gap-4">
                <div class="h-2 w-2 rounded-full bg-primary mt-2"></div>
                <div class="space-y-1">
                    <p class="text-sm font-medium">You have a new message!</p>
                    <p class="text-sm text-muted-foreground">2 hours ago</p>
                </div>
            </div>
        </div>
    </CardContent>
    <CardFooter>
        <Button Class="w-full">Mark all as read</Button>
    </CardFooter>
</Card>
```

--------------------------------

### Button Loading State

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/button

Shows how to display a loading spinner within a button using the IsLoading property. The second example demonstrates dynamic text and state management.

```html
<Button IsLoading="true">Loading</Button>
<Button IsLoading="@isLoading" OnClick="HandleClick">
    @(isLoading ? "Please wait..." : "Click me")
</Button>
```

--------------------------------

### Configure Max Visible Toasts

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/sonner

Control the maximum number of fully visible toasts before they start stacking using the `MaxVisible` parameter. The default is 3, with a minimum of 1.

```csharp
<Sonner MaxVisible="5" />

@* Show up to 5 toasts fully before stacking begins. *@
@* Default is 3. Minimum 1. *@

```

--------------------------------

### Internal Navigation Links

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/link

Provides examples of using the Link component for internal navigation between pages within the application. Different variants can be applied for visual distinction.

```razor
<Link Href="components/button">View Button</Link>
<Link Href="components/card" Variant="ButtonVariant.Outline">View Card</Link>
<Link Href="installation" Variant="ButtonVariant.Ghost">Installation</Link>
```

--------------------------------

### Form Dialog Example

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/dialog

A dialog designed to contain a form for user input. Wrap form elements within DialogBody. The 'max-w-[425px]' class sets a maximum width.

```razor
<Dialog @bind-Open="formOpen">
    <DialogTrigger>
        <Button Variant="ButtonVariant.Outline">Edit Profile</Button>
    </DialogTrigger>
    <DialogContent Class="max-w-[425px]">
        <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
                Make changes to your profile here.
            </DialogDescription>
        </DialogHeader>
        <DialogBody>
            <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" />
                </div>
            </div>
        </DialogBody>
        <DialogFooter>
            <Button>Save changes</Button>
        </DialogFooter>
    </DialogContent>
</Dialog>
```

--------------------------------

### Controlled Popover State

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/popover

This example demonstrates how to control the popover's visibility programmatically using a boolean variable bound to the @bind-Open directive. This is useful for managing the popover's state based on application logic.

```razor
@code {
    private bool popoverOpen;
}

<Popover @bind-Open="popoverOpen">
    <PopoverTrigger>
        <Button>Toggle Popover</Button>
    </PopoverTrigger>
    <PopoverContent>
        <p>This is a controlled popover.</p>
        <Button @onclick="() => popoverOpen = false">Close</Button>
    </PopoverContent>
</Popover>
```

--------------------------------

### Basic Command Menu

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/command

Implement a basic command menu with search functionality, grouped suggestions, and actions. Includes shortcuts and disabled items.

```html
<Command Class="max-w-sm">
    <CommandInput Placeholder="Type a command or search..." />
    <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup Heading="Suggestions">
            <CommandItem Value="Calendar">Calendar</CommandItem>
            <CommandItem Value="Search">Search</CommandItem>
            <CommandItem Value="Settings">Settings</CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup Heading="Actions">
            <CommandItem Value="Profile">
                Profile
                <CommandShortcut>⌘P</CommandShortcut>
            </CommandItem>
            <CommandItem Value="Billing">
                Billing
                <CommandShortcut>⌘B</CommandShortcut>
            </CommandItem>
            <CommandItem Value="Team" Disabled="true">Team</CommandItem>
        </CommandGroup>
    </CommandList>
</Command>
```

--------------------------------

### Disabled Button

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/button

Provides examples of how to disable a button to prevent user interaction. This can be applied to default and outlined variants.

```html
<Button Disabled="true">Disabled</Button>
<Button Variant="ButtonVariant.Outline" Disabled="true">Disabled</Button>
```

--------------------------------

### Basic Tooltip Implementation

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/tooltip

Demonstrates the fundamental usage of the Tooltip component. Use this for simple information popups triggered by hovering over a button.

```Razor
<Tooltip>
    <TooltipTrigger>
        <Button Variant="ButtonVariant.Outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
        <p>Add to library</p>
    </TooltipContent>
</Tooltip>
```

--------------------------------

### Input Group with Addons on Both Sides

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/input-group

Combine InlineStart and InlineEnd addons on the same input for prefix and suffix elements like icons and buttons.

```razor
<InputGroup>
    <InputGroupInput Placeholder="https://example.com" />
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <InputGroupText>
            <!-- Globe icon -->
            <svg>...</svg>
        </InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon Align="InputGroupAlign.InlineEnd">
        <InputGroupButton>
            <!-- Copy icon -->
            <svg>...</svg>
            Copy
        </InputGroupButton>
    </InputGroupAddon>
</InputGroup>
```

--------------------------------

### Basic Skeleton Shapes

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/skeleton

Demonstrates the basic usage of the Skeleton component with different dimensions.

```html
<Skeleton Class="h-4 w-[250px]" />
<Skeleton Class="h-4 w-[200px]" />
<Skeleton Class="h-4 w-[150px]" />
```

--------------------------------

### Disabled Checkbox Example

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/checkbox

This snippet demonstrates how to render a disabled checkbox. The 'Disabled' property set to 'true' prevents user interaction.

```razor
<Checkbox Checked="true" Disabled="true" />
```

--------------------------------

### Add ShadCn.Blazor Using Statements

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/installation

Include these using statements in your _Imports.razor file to easily access ShadCn.Blazor components and their namespaces.

```razor
@using ShadCn.Blazor.Components
@using ShadCn.Blazor.Components.Alert
@using ShadCn.Blazor.Components.Badge
@using ShadCn.Blazor.Components.Button
@using ShadCn.Blazor.Components.Card
@using ShadCn.Blazor.Components.Input
@using ShadCn.Blazor.Components.Separator
```

--------------------------------

### Dropdown Menu Alignment

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/dropdown-menu

Control the positioning of the dropdown menu content using the Align parameter on DropdownMenuContent. Options include Start and End.

```razor
<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">Start</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Align="DropdownMenuAlign.Start">
        <DropdownMenuItem>Item 1</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">End</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Align="DropdownMenuAlign.End">
        <DropdownMenuItem>Item 1</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>
```

--------------------------------

### Register ShadCn.Blazor Services

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/installation

Register the necessary services for ShadCn.Blazor components in your application's Program.cs file.

```csharp
builder.Services.AddShadCnBlazorComponents();
```

--------------------------------

### Card Loading Skeleton

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/skeleton

Shows how to use Skeleton components to create a placeholder for a card's content, including an avatar and text lines.

```html
<div class="flex items-center space-x-4">
    <Skeleton Class="h-12 w-12 rounded-full" />
    <div class="space-y-2">
        <Skeleton Class="h-4 w-[250px]" />
        <Skeleton Class="h-4 w-[200px]" />
    </div>
</div>
```

--------------------------------

### Sheet Side Direction Control

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/sheet

Demonstrates how to control the direction from which the Sheet slides in using the 'Side' property. This example iterates through all available 'SheetSide' enum values.

```razor
@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>
}
```

--------------------------------

### Basic Item Usage

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/item

A simple Item with a title and description. Use this for straightforward content display.

```html
<Item>
    <ItemContent>
        <ItemTitle>Notifications</ItemTitle>
        <ItemDescription>Manage your notification preferences.</ItemDescription>
    </ItemContent>
</Item>
```

--------------------------------

### Default Menubar

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/menubar

A standard menubar with File, Edit, View, and Help menus. Use MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarItem, MenubarSeparator, and MenubarShortcut for structure and shortcuts.

```html
<Menubar>
    <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
            <MenubarGroup>
                <MenubarItem>
                    New Tab <MenubarShortcut>⌘T</MenubarShortcut>
                </MenubarItem>
                <MenubarItem>
                    New Window <MenubarShortcut>⌘N</MenubarShortcut>
                </MenubarItem>
                <MenubarItem Disabled="true">New Incognito Window</MenubarItem>
            </MenubarGroup>
            <MenubarSeparator />
            <MenubarGroup>
                <MenubarItem>Share</MenubarItem>
                <MenubarItem>Print</MenubarItem>
            </MenubarGroup>
        </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
            <MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
            <MenubarItem>Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
            <MenubarSeparator />
            <MenubarItem>Cut <MenubarShortcut>⌘X</MenubarShortcut></MenubarItem>
            <MenubarItem>Copy <MenubarShortcut>⌘C</MenubarShortcut></MenubarItem>
            <MenubarItem>Paste <MenubarShortcut>⌘V</MenubarShortcut></MenubarItem>
        </MenubarContent>
    </MenubarMenu>
</Menubar>
```

--------------------------------

### Basic Sidebar Structure

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/sidebar

Demonstrates the fundamental structure of the Sidebar component with header, content, and menu items. Use this for standard navigation layouts.

```html
<Sidebar>
    <SidebarHeader>
        <span class="font-semibold">My App</span>
    </SidebarHeader>
    <SidebarContent>
        <SidebarGroupLabel>Platform</SidebarGroupLabel>
        <SidebarGroupContent>
            <SidebarMenu>
                <SidebarMenuItem Href="/" Active="true" Title="Dashboard">
                    Dashboard
                </SidebarMenuItem>
                <SidebarMenuItem Href="/analytics" Title="Analytics">
                    Analytics
                </SidebarMenuItem>
            </SidebarMenu>
        </SidebarGroupContent>
        
        <SidebarGroupLabel>Settings</SidebarGroupLabel>
        <SidebarGroupContent>
            <SidebarMenu>
                <SidebarMenuItem Href="/profile" Title="Profile">
                    Profile
                </SidebarMenuItem>
            </SidebarMenu>
        </SidebarGroupContent>
    </SidebarContent>
</Sidebar>
```

--------------------------------

### Basic Sidebar with Navigation

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/sidebar

A standard sidebar implementation featuring navigation links with icons and text. Use this for primary site navigation.

```html
<Sidebar>
    <SidebarHeader>
        <span class="font-semibold">Acme Inc</span>
    </SidebarHeader>
    <SidebarContent>
        <SidebarMenu>
            <SidebarMenuItem Href="/" Active="true" Title="Dashboard">
                <Icon>🏠</Icon>
                <ChildContent>Dashboard</ChildContent>
            </SidebarMenuItem>
            <SidebarMenuItem Href="/users" Title="Users">
                <Icon>👤</Icon>
                <ChildContent>Users</ChildContent>
            </SidebarMenuItem>
        </SidebarMenu>
    </SidebarContent>
    <SidebarFooter>
        <div class="text-xs text-muted-foreground">v1.0.0</div>
    </SidebarFooter>
</Sidebar>
```

--------------------------------

### Calendar with Date Range Constraints

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/calendar

Restrict the selectable date range by setting minimum and maximum dates. This example allows selection from today up to 30 days in the future.

```razor
<Calendar @bind-SelectedDate="selectedDate"
          MinDate="@DateTime.Today"
          MaxDate="@DateTime.Today.AddDays(30)" />

@code {
    private DateTime? selectedDate;
}
```

--------------------------------

### Basic Progress Bar

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/progress

Use this to display a static progress value. Set the 'Value' attribute to represent the completion percentage.

```html
<Progress Value="33" />
<Progress Value="66" />
<Progress Value="100" />
```

--------------------------------

### Basic Table Structure

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/table

A simple table with a header, body, and caption. Use this for displaying tabular data with a clear title.

```html
<Table>
    <TableCaption>A list of your recent invoices.</TableCaption>
    <TableHeader>
        <TableRow>
            <TableHead Class="w-[100px]">Invoice</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Method</TableHead>
            <TableHead Class="text-right">Amount</TableHead>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableCell Class="font-medium">INV001</TableCell>
            <TableCell>Paid</TableCell>
            <TableCell>Credit Card</TableCell>
            <TableCell Class="text-right">$250.00</TableCell>
        </TableRow>
    </TableBody>
</Table>
```

--------------------------------

### Add Theme CSS to HTML

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/installation

Include the ShadCn.Blazor theme stylesheet in your main HTML file to apply default styling.

```html
<link rel="stylesheet" href="_content/ShadCn.Blazor.Theme.Default/theme.css" />
```

--------------------------------

### Radial Chart with Center Text (Gauge)

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/charts/radial

Implement a progress indicator or gauge by using a single data item and the CenterContent slot. This allows displaying custom text, like a percentage, in the center of the radial chart. Configure start and end angles for specific gauge ranges.

```csharp
// For gauge/progress, use a single data item with CenterContent.
var gaugeConfig = new ChartConfig
{
    ["progress"] = new ChartConfigEntry { Label = "Progress", Color = "hsl(var(--chart-1))" }
};

var gaugeData = new List<Dictionary<string, object>>
{
    new() { ["name"] = "progress", ["value"] = 75, ["fill"] = "var(--color-progress)" }
};

<ChartContainer Config="@gaugeConfig" Class="h-[250px] w-[250px]">
    <RadialChart Data="@gaugeData">
        <Radial DataKey="value" NameKey="name"
                OuterRadius="110" InnerRadius="80"
                MaxValue="100" StartAngle="-90" EndAngle="270">
            <CenterContent>
                <div class="flex flex-col">
                    <span class="text-3xl font-bold">75%</span>
                    <span class="text-xs text-muted-foreground">Complete</span>
                </div>
            </CenterContent>
        </Radial>
    </RadialChart>
</ChartContainer>
```

--------------------------------

### Dialog Size Variations

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/dialog

Illustrates how to control the width of the dialog content using the Size parameter. Available sizes range from 'Sm' to 'Full'.

```razor
@* Small *@
<DialogContent Size="DialogSize.Sm">...</DialogContent>

@* Default (max-w-lg) *@
<DialogContent Size="DialogSize.Default">...</DialogContent>

@* Extra Large *@
<DialogContent Size="DialogSize.Xl">...</DialogContent>

@* 3XL *@
<DialogContent Size="DialogSize.Max3xl">...</DialogContent>

@* Fullscreen *@
<DialogContent Size="DialogSize.Full">...</DialogContent>

@* Available sizes: Sm, Md, Lg, Xl, Max2xl, Max3xl, Max4xl, Max5xl, Max6xl, Max7xl, Full *@

```

--------------------------------

### Basic Dropdown Menu

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/dropdown-menu

A standard dropdown menu with labels, items, and separators. Use this for a simple list of actions.

```razor
<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">Open Menu</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Billing</DropdownMenuItem>
            <DropdownMenuItem>Settings</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Log out</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>
```

--------------------------------

### Open Dialog with Strongly-Typed Result

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/dialog-service

Inject `IDialogService` and use `ShowAsync` to open a dialog with specific content, result, and input types. The result can be checked for success and accessed.

```csharp
@inject IDialogService DialogService

@code {
    private async Task OpenDialog() {
        var input = new UserProfile { Name = "John Doe", Username = "johndoe" };
        
        var result = await DialogService.ShowAsync<SimpleDialogContent, DialogResult, UserProfile>(
            input,
            new DialogOptions { Dismissable = true }
        );

        if (result.Success) {
            Console.WriteLine($"Updated: {result.UpdatedProfile.Name}");
        }
    }
}
```

--------------------------------

### External Link Configuration

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/link

Shows how to configure an external Link to open in a new tab using the target="_blank" and rel="noopener noreferrer" attributes.

```razor
<Link Href="https://github.com" target="_blank" rel="noopener noreferrer">
    GitHub ↗
</Link>
```

--------------------------------

### Control Dialog Size with DialogOptions

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/dialog-service

Use `DialogOptions.Size` to specify the width of the dialog when opening it via the service. Various predefined sizes are available, from `Sm` to `Full` (fullscreen).

```csharp
var result = await DialogService.ShowAsync<SimpleDialogContent, DialogResult, UserProfile>(
    input,
    new DialogOptions
    {
        Size = DialogSize.Xl,       // Extra large
        Dismissable = true
    }
);

// Available sizes:
// DialogSize.Sm      - max-w-sm
// DialogSize.Md      - max-w-md
// DialogSize.Default - max-w-lg (default)
// DialogSize.Lg      - max-w-lg
// DialogSize.Xl      - max-w-xl
// DialogSize.Max2xl  - max-w-2xl
// DialogSize.Max3xl  - max-w-3xl
// DialogSize.Max4xl  - max-w-4xl
// DialogSize.Max5xl  - max-w-5xl
// DialogSize.Max6xl  - max-w-6xl
// DialogSize.Max7xl  - max-w-7xl
// DialogSize.Full    - fullscreen
```

--------------------------------

### Menubar with Submenu

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/menubar

Create nested menus using MenubarSub, MenubarSubTrigger, and MenubarSubContent. This allows for hierarchical menu structures.

```html
<Menubar>
    <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
            <MenubarItem>New File</MenubarItem>
            <MenubarItem>Open File</MenubarItem>
            <MenubarSeparator />
            <MenubarSub>
                <MenubarSubTrigger>Share</MenubarSubTrigger>
                <MenubarSubContent>
                    <MenubarItem>Email Link</MenubarItem>
                    <MenubarItem>Messages</MenubarItem>
                    <MenubarItem>Airdrop</MenubarItem>
                </MenubarSubContent>
            </MenubarSub>
            <MenubarSeparator />
            <MenubarItem>Print</MenubarItem>
        </MenubarContent>
    </MenubarMenu>
</Menubar>
```

--------------------------------

### Dropdown Menu with Shortcuts

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/dropdown-menu

Add `DropdownMenuShortcut` to display keyboard hints alongside menu items for actions like Undo, Cut, Copy, and Paste.

```razor
<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">Edit</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="w-56">
        <DropdownMenuLabel>Edit</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
            Undo
            <DropdownMenuShortcut>⌘Z</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
            Cut
            <DropdownMenuShortcut>⌘X</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
            Copy
            <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
            Paste
            <DropdownMenuShortcut>⌘V</DropdownMenuShortcut>
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>
```

--------------------------------

### Basic Avatar Usage

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/avatar

Renders an avatar with an image source and an alternative text. Includes a fallback option with initials if the image fails to load.

```html
<Avatar Src="https://github.com/shadcn.png" Alt="@shadcn" />
<Avatar Fallback="CN" />
```

--------------------------------

### Basic Sheet Implementation

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/sheet

A standard implementation of the Sheet component that slides in from the right. It includes a trigger button, content header, body, and footer with action buttons.

```razor
<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>
```

--------------------------------

### Link Sizes

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/link

Illustrates how to adjust the size of the Link component using the Size property, with options for Small, Default, and Large.

```razor
<Link Href="/page" Size="ButtonSize.Sm">Small</Link>
<Link Href="/page" Size="ButtonSize.Default">Default</Link>
<Link Href="/page" Size="ButtonSize.Lg">Large</Link>
```

--------------------------------

### Default Card Structure

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/card

A basic card with a title, description, content, and an action button. Use this for general content display.

```html
<Card Class="max-w-sm">
    <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
    </CardHeader>
    <CardContent>
        <p>Card Content</p>
    </CardContent>
    <CardFooter>
        <Button>Action</Button>
    </CardFooter>
</Card>
```

--------------------------------

### Open Edit Profile Sheet with SheetService

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/sheet-service

Shows how to use the SheetService to open a specific sheet for editing a profile. It demonstrates passing input data and handling the result.

```csharp
@inject ISheetService SheetService

@code {
    private async Task OpenSheet()
    {
        var input = new EditProfileModel { Name = "John Doe", Username = "johndoe" };

        var result = await SheetService.ShowAsync<EditProfileSheet, EditProfileModel, EditProfileModel>(
            input,
            new SheetOptions { Side = SheetSide.Right }
        );

        if (result != null)
        {
            Console.WriteLine($"Updated: {result.Name}");
        }
    }
}
```

--------------------------------

### Item with Actions

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/item

Includes interactive actions, such as buttons, on the right side of the item. Ideal for items requiring user interaction.

```html
<Item>
    <ItemMedia Variant="ItemMediaVariant.Icon">
        <SettingsIcon />
    </ItemMedia>
    <ItemContent>
        <ItemTitle>Settings</ItemTitle>
        <ItemDescription>Configure your application settings.</ItemDescription>
    </ItemContent>
    <ItemActions>
        <Button Variant="ButtonVariant.Outline" Size="ButtonSize.Sm">Edit</Button>
    </ItemActions>
</Item>
```

--------------------------------

### Small Text

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/typography

Use the <small> tag for fine print and labels.

```html
<small>Email address</small>
```

--------------------------------

### Item Sizes

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/item

Controls the density and spacing of the Item component using the Size parameter. Select 'Default' for standard spacing or 'Sm' for a more compact layout.

```html
<Item Size="ItemSize.Default">
    <ItemContent>
        <ItemTitle>Default size</ItemTitle>
        <ItemDescription>Standard padding and gaps.</ItemDescription>
    </ItemContent>
</Item>
```

```html
<Item Size="ItemSize.Sm">
    <ItemContent>
        <ItemTitle>Small size</ItemTitle>
        <ItemDescription>Compact padding and gaps.</ItemDescription>
    </ItemContent>
</Item>
```

--------------------------------

### Tooltip with Custom Delay Configuration

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/tooltip

Shows how to control the delay before a tooltip appears. Configure 'DelayDuration' to 0 for immediate display or to a specific millisecond value for a delayed appearance.

```Razor
<Tooltip DelayDuration="0">
    <TooltipTrigger>
        <Button>No delay</Button>
    </TooltipTrigger>
    <TooltipContent>
        <p>Shows immediately</p>
    </TooltipContent>
</Tooltip>

<Tooltip DelayDuration="1000">
    <TooltipTrigger>
        <Button>1s delay</Button>
    </TooltipTrigger>
    <TooltipContent>
        <p>1 second delay</p>
    </TooltipContent>
</Tooltip>
```

--------------------------------

### Default Bar Chart Configuration

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/charts/bar

Configure a basic bar chart with two data series (desktop and mobile) and animate bars on first render. Requires ChartContainer, BarChart, CartesianGrid, XAxis, Bar, and ChartTooltip components.

```csharp
// Config — two series
var config = new ChartConfig
{
    ["desktop"] = new ChartConfigEntry { Label = "Desktop", Color = "hsl(var(--chart-1))" },
    ["mobile"]  = new ChartConfigEntry { Label = "Mobile",  Color = "hsl(var(--chart-2))" }
};

<ChartContainer Config="@config" Class="h-[300px]">
    <BarChart Data="@data" XDataKey="month">
        <CartesianGrid Vertical="false" />
        <XAxis TickLine="false" AxisLine="false" />
        <Bar DataKey="desktop" Fill="var(--color-desktop)" Radius="4" />
        <Bar DataKey="mobile" Fill="var(--color-mobile)" Radius="4" />
        <ChartTooltip />
    </BarChart>
    <ChartLegend />
</ChartContainer>
```

--------------------------------

### Input Group with Keyboard Shortcut (Kbd)

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/input-group

Show keyboard shortcuts inside the input group using a `kbd` element within an addon.

```razor
<InputGroup>
    <InputGroupInput Placeholder="Search documentation..." />
    <InputGroupAddon Align="InputGroupAlign.InlineStart">
        <InputGroupText>
            <!-- Search icon -->
            <svg>...</svg>
        </InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon Align="InputGroupAlign.InlineEnd">
        <kbd class="pointer-events-none inline-flex h-5 ..."
             >⌘K</kbd>
    </InputGroupAddon>
</InputGroup>
```

--------------------------------

### Default Pie Chart Configuration and Data

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/charts/pie

Configure pie chart colors and data. The config maps category names to colors, and data requires a 'fill' property pointing to the color variable.

```csharp
var config = new ChartConfig
{
    ["chrome"]  = new ChartConfigEntry { Label = "Chrome",  Color = "hsl(var(--chart-1))" },
    ["safari"]  = new ChartConfigEntry { Label = "Safari",  Color = "hsl(var(--chart-2))" },
    ["firefox"] = new ChartConfigEntry { Label = "Firefox", Color = "hsl(var(--chart-3))" },
    ["edge"]    = new ChartConfigEntry { Label = "Edge",    Color = "hsl(var(--chart-4))" },
    ["other"]   = new ChartConfigEntry { Label = "Other",   Color = "hsl(var(--chart-5))" }
};

var pieData = new List<Dictionary<string, object>>
{
    new() { ["browser"] = "chrome",  ["visitors"] = 275, ["fill"] = "var(--color-chrome)" },
    new() { ["browser"] = "safari",  ["visitors"] = 200, ["fill"] = "var(--color-safari)" },
    new() { ["browser"] = "firefox", ["visitors"] = 187, ["fill"] = "var(--color-firefox)" },
    new() { ["browser"] = "edge",    ["visitors"] = 173, ["fill"] = "var(--color-edge)" },
    new() { ["browser"] = "other",   ["visitors"] = 90,  ["fill"] = "var(--color-other)" },
};

// Pie slices animate in with a scale effect.
<ChartContainer Config="@config" Class="h-[250px] w-[250px]">
    <PieChart Data="@pieData">
        <Pie DataKey="visitors" NameKey="browser" OuterRadius="100" />
    </PieChart>
</ChartContainer>
```

--------------------------------

### Dropdown Menu with Icons and Shortcuts

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/dropdown-menu

Enhance dropdown items with inline SVG icons for visual context and `DropdownMenuShortcut` to display keyboard hints.

```razor
<DropdownMenu>
    <DropdownMenuTrigger>
        <Button Variant="ButtonVariant.Outline">Open Menu</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent Class="w-56">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuItem>
                <UserIcon />
                Profile
                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
                <CreditCardIcon />
                Billing
                <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
                <SettingsIcon />
                Settings
                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem Variant="DropdownMenuItemVariant.Destructive">
            <LogOutIcon />
            Log out
            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>
```

--------------------------------

### Open Stacked Dialogs from within a Dialog

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/dialog-service

Dialog components can inject `IDialogService` to open new dialogs, creating stacked dialogs. Each new dialog stacks on top, and closing the topmost reveals the one beneath.

```csharp
// The dialog component can inject IDialogService and open new dialogs:
@inject IDialogService DialogService

<DialogHeader>
    <DialogTitle>Dialog Level @Data.Level</DialogTitle>
</DialogHeader>
<DialogBody>
    <p>Dialog content...</p>
</DialogBody>
<DialogFooter>
    <Button OnClick="OpenNested">Open Next Dialog</Button>
</DialogFooter>

@code {
    [Parameter] public NestedDialogModel Data { get; set; } = new();
    [CascadingParameter] public DialogContext Dialog { get; set; } = default!;
    @inject IDialogService DialogService

    private async Task OpenNested() {
        var input = new NestedDialogModel { Level = Data.Level + 1 };
        var result = await DialogService
            .ShowAsync<NestedDialogContent, string, NestedDialogModel>(input);
    }
}
```

--------------------------------

### Default Alert

Source: https://shadcnblazordocs.ashymoss-4232cb31.swedencentral.azurecontainerapps.io/components/alert

A basic alert with a title and description. Use for general information.

```razor
<Alert>
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
        You can add components to your app using the CLI.
    </AlertDescription>
</Alert>
```
Tokens:
Raw