### Installation

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Icons.Lucide/README.md

Install the BlazorBlueprint.Icons.Lucide package using the .NET CLI.

```APIDOC
## Installation

Install the BlazorBlueprint.Icons.Lucide package using the .NET CLI.

```bash
dotnet add package BlazorBlueprint.Icons.Lucide
```
```

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

### BlazorHeroicons Installation

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Icons.Heroicons/README.md

Instructions on how to install the BlazorHeroicons package using the .NET CLI.

```APIDOC
## Installation

```bash
dotnet add package BlazorBlueprint.Icons.Heroicons
```
```

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

### Install Heroicons Package

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Icons.Heroicons/README.md

Use the .NET CLI to add the package to your project.

```bash
dotnet add package BlazorBlueprint.Icons.Heroicons
```

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

### Install Icon Libraries

Source: https://github.com/blazorblueprintui/ui/blob/main/README.md

Add optional icon library packages to your project.

```bash
dotnet add package BlazorBlueprint.Icons.Lucide      # 1,640+ icons
dotnet add package BlazorBlueprint.Icons.Heroicons    # 1,288 icons (4 variants)
dotnet add package BlazorBlueprint.Icons.Feather      # 286 icons
```

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

### Top Drawer Example

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Drawer/directions.txt

This example demonstrates how to implement a drawer that slides in from the top. It includes a trigger button and a content area with a header, title, and description.

```cshtml
<BbDrawer Direction="DrawerDirection.Top">
    <BbDrawerTrigger>
        <BbButton Variant="ButtonVariant.Outline">Top</BbButton>
    </BbDrawerTrigger>
    <BbDrawerContent ShowHandle="false">
        <BbDrawerHeader>
            <BbDrawerTitle>Top Drawer</BbDrawerTitle>
            <BbDrawerDescription>This slides from the top.</BbDrawerDescription>
        </BbDrawerHeader>
    </BbDrawerContent>
</BbDrawer>
```

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

### Build Project

Source: https://github.com/blazorblueprintui/ui/blob/main/CONTRIBUTING.md

Build the project to verify dependencies are installed and the project compiles successfully.

```bash
dotnet build
```

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

### Initialize Project Template

Source: https://github.com/blazorblueprintui/ui/blob/main/README.md

Install the project templates and create a new Blazor Blueprint application.

```bash
dotnet new install BlazorBlueprint.Templates
dotnet new blazorblueprint -n MyApp
```

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

### PortalService Runtime Warning Example

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Example of the LogLevel.Warning emitted by PortalService when no BbPortalHost is detected in the layout.

```log
warn: BlazorBlueprint.Primitives.Services.PortalService[1]
      BlazorBlueprint: No <BbPortalHost /> detected. Portal-based components (Dialog, Select, Popover, etc.)
      require a <BbPortalHost /> in your layout to render. Add <BbPortalHost /> to your MainLayout.razor.
```

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

### Input Group with Start and End Addons

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/InputGroup/basic.txt

This example demonstrates an input group with addons at both the start and end. It's suitable for email inputs with validation icons. Requires LucideIcon component.

```razor
<BbInputGroup>
    <BbInputGroupAddon Align="InputGroupAlign.InlineStart">
        <LucideIcon Name="at-sign" Size="16" />
    </BbInputGroupAddon>
    <BbInputGroupInput Type="InputType.Email" Placeholder="name@example.com" />
    <BbInputGroupAddon Align="InputGroupAlign.InlineEnd">
        <LucideIcon Name="circle-check" Size="16" />
    </BbInputGroupAddon>
</BbInputGroup>
```

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

### Advanced Icon Usage Examples

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Icons.Heroicons/README.md

Examples covering custom classes, accessibility, and data attributes.

```razor
<HeroIcon Name="home" />
```

```razor
<HeroIcon Name="star" Variant="HeroIconVariant.Solid" />
```

```razor
<HeroIcon Name="heart" Variant="HeroIconVariant.Mini" Color="#EF4444" />
```

```razor
<HeroIcon Name="check" Variant="HeroIconVariant.Micro" Size="20" />
```

```razor
<HeroIcon Name="exclamation-triangle" Class="text-destructive hover:text-destructive/80" />
```

```razor
<button>
    <HeroIcon Name="trash" Variant="HeroIconVariant.Solid" AriaLabel="Delete item" />
</button>
```

```razor
<HeroIcon Name="cog-6-tooth" data-testid="settings-icon" />
```

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

### Install BlazorBlueprint.Components Package

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Components/README.md

Add the BlazorBlueprint.Components NuGet package to your project using the .NET CLI.

```bash
dotnet add package BlazorBlueprint.Components
```

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

### Install Tailwind CSS CLI (Linux/macOS)

Source: https://github.com/blazorblueprintui/ui/blob/main/CONTRIBUTING.md

Download the Tailwind CSS standalone CLI binary using the provided installation script for Linux or macOS.

```bash
cd tools
./install.sh
```

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

### Add BlazorBlueprint.Primitives Package

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Primitives/README.md

Install the BlazorBlueprint.Primitives NuGet package using the .NET CLI.

```bash
dotnet add package BlazorBlueprint.Primitives
```

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

### Basic Input Group with Start Addon

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/InputGroup/basic.txt

Use this snippet to create an input group with a starting addon, such as a search icon. Ensure the LucideIcon component is available.

```razor
<BbInputGroup>
    <BbInputGroupAddon Align="InputGroupAlign.InlineStart">
        <LucideIcon Name="search" Size="16" />
    </BbInputGroupAddon>
    <BbInputGroupInput Placeholder="Search..." />
</BbInputGroup>
```

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

### Basic Dialog Example

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Components/README.md

Demonstrates how to implement a basic dialog with a trigger button, header, content, and footer.

```razor
<BbDialog>
    <BbDialogTrigger AsChild>
        <BbButton>Open Dialog</BbButton>
    </BbDialogTrigger>
    <BbDialogContent>
        <BbDialogHeader>
            <BbDialogTitle>Confirm Action</BbDialogTitle>
            <BbDialogDescription>
                Are you sure you want to proceed?
            </BbDialogDescription>
        </BbDialogHeader>
        <p>This action cannot be undone.</p>
        <BbDialogFooter>
            <BbDialogClose AsChild>
                <BbButton Variant="ButtonVariant.Outline">Cancel</BbButton>
            </BbDialogClose>
            <BbButton Variant="ButtonVariant.Default">Confirm</BbButton>
        </BbDialogFooter>
    </BbDialogContent>
</BbDialog>
```

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

### Install Blazor Blueprint Packages

Source: https://github.com/blazorblueprintui/ui/blob/main/README.md

Add the required NuGet packages for styled components or headless primitives to your .NET project.

```bash
# Styled components (includes Primitives)
dotnet add package BlazorBlueprint.Components

# Or just headless primitives for custom styling
dotnet add package BlazorBlueprint.Primitives
```

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

### v2 CommandDialog Boilerplate

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Demonstrates the manual setup for a command palette with keyboard shortcut registration in v2.

```razor
@inject IKeyboardShortcutService KeyboardShortcuts
@implements IDisposable

<Dialog @bind-Open="_isOpen">
    <DialogContent Class="overflow-hidden p-0 shadow-lg">
        <Command OnValueChange="HandleSelect">
            <CommandInput Placeholder="Type a command..." AutoFocus="true" />
            <CommandList>
                <CommandEmpty>No results found.</CommandEmpty>
                <CommandGroup Heading="Actions">
                    <CommandItem Value="profile">Profile</CommandItem>
                    <CommandItem Value="settings">Settings</CommandItem>
                </CommandGroup>
            </CommandList>
        </Command>
    </DialogContent>
</Dialog>

@code {
    private bool _isOpen;
    private IDisposable? _shortcutRegistration;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _shortcutRegistration = await KeyboardShortcuts.RegisterAsync("Ctrl+K", () =>
            {
                _isOpen = !_isOpen;
                StateHasChanged();
                return Task.CompletedTask;
            });
        }
    }

    private void HandleSelect(string value)
    {
        _isOpen = false;
        // handle selection...
    }

    public void Dispose() => _shortcutRegistration?.Dispose();
}
```

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

### Install Tailwind CSS CLI (Windows)

Source: https://github.com/blazorblueprintui/ui/blob/main/CONTRIBUTING.md

Download the Tailwind CSS standalone CLI binary using the provided installation script for Windows PowerShell.

```powershell
cd tools
.\install.ps1
```

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

### Install BlazorBlueprint.Icons.Lucide Package

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Icons.Lucide/README.md

Use the .NET CLI to add the Lucide icon package to your Blazor project.

```bash
dotnet add package BlazorBlueprint.Icons.Lucide
```

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

### Skeleton Examples

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Components/README.md

Demonstrates rectangular and circular skeleton loaders. The shape and class can be customized.

```razor
<BbSkeleton Shape="SkeletonShape.Rectangular" Class="w-full h-4" />
<BbSkeleton Shape="SkeletonShape.Circular" Class="w-12 h-12" />
```

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

### Basic LineChart Example

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Components/Components/Chart/README.md

A fundamental example of a LineChart with X and Y axes, tooltip, legend, and two data series (desktop and mobile). Includes sample data definition.

```razor
<LineChart Data="@data" Height="300px">
    <XAxis DataKey="month" />
    <YAxis />
    <ChartTooltip />
    <ChartLegend />
    <Line DataKey="desktop" Name="Desktop" Color="var(--chart-1)" />
    <Line DataKey="mobile" Name="Mobile" Color="var(--chart-2)" />
</LineChart>

@code {
    private record MonthlyData(string Month, int Desktop, int Mobile);

    private List<MonthlyData> data =
    [
        new("Jan", 186, 80),
        new("Feb", 305, 200),
        new("Mar", 237, 120),
        new("Apr", 73, 190),
        new("May", 209, 130),
        new("Jun", 214, 140)
    ];
}
```

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

### Install BlazorBlueprint.Icons.Feather Package

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Icons.Feather/README.md

Use the dotnet CLI to add the Feather icon package to your Blazor project.

```bash
dotnet add package BlazorBlueprint.Icons.Feather
```

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

### Component Prefixing: After

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Example of Blazor component usage after applying the 'Bb' prefix.

```razor
<BbDialog @bind-Open="_open">
    <BbDialogTrigger>
        <BbButton>Open</BbButton>
    </BbDialogTrigger>
    <BbDialogContent>
        <BbDialogHeader>
            <BbDialogTitle>Title</BbDialogTitle>
            <BbDialogDescription>Description</BbDialogDescription>
        </BbDialogHeader>
    </BbDialogContent>
</BbDialog>
```

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

### Render a Basic Icon (Component API Example)

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Icons.Lucide/README.md

Demonstrates the most basic usage of the LucideIcon component, specifying only the required 'Name' parameter.

```razor
<LucideIcon Name="home" />
```

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

### v2 _Imports.razor Example

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Shows the multiple namespace imports required in v2 for Blazor Blueprint components and primitives.

```razor
@using BlazorBlueprint.Components
@using BlazorBlueprint.Components.Button
@using BlazorBlueprint.Components.Input
@using BlazorBlueprint.Components.Dialog
@using BlazorBlueprint.Components.Sheet
@using BlazorBlueprint.Components.Accordion
@using BlazorBlueprint.Components.Tabs
@using BlazorBlueprint.Components.Select
@using BlazorBlueprint.Components.Avatar
@using BlazorBlueprint.Components.Badge
@using BlazorBlueprint.Primitives.Services
```

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

### Using BbButton Component

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Components/README.md

Example of how to use the BbButton component with a default variant.

```razor
<BbButton Variant="ButtonVariant.Default">Click me</BbButton>
```

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

### BlazorHeroicons Advanced Examples

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Icons.Heroicons/README.md

Demonstrates advanced usage patterns for the HeroIcon component, including accessibility, custom classes, and data attributes.

```APIDOC
## Advanced Examples

**Basic Icon (Outline):**
```razor
<HeroIcon Name="home" />
```

**Solid Icon:**
```razor
<HeroIcon Name="star" Variant="HeroIconVariant.Solid" />
```

**Mini Icon with Custom Color:**
```razor
<HeroIcon Name="heart" Variant="HeroIconVariant.Mini" Color="#EF4444" />
```

**Micro Icon with Custom Size:**
```razor
<HeroIcon Name="check" Variant="HeroIconVariant.Micro" Size="20" />
```

**Icon with Custom CSS Classes:**
```razor
<HeroIcon Name="exclamation-triangle" Class="text-destructive hover:text-destructive/80" />
```

**Accessible Icon-Only Button:**
```razor
<button>
    <HeroIcon Name="trash" Variant="HeroIconVariant.Solid" AriaLabel="Delete item" />
</button>
```

**Icon with Data Attributes:**
```razor
<HeroIcon Name="cog-6-tooth" data-testid="settings-icon" />
```
```

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

### Use Blazor Blueprint components

Source: https://github.com/blazorblueprintui/ui/blob/main/README.md

Example usage of the Button and Dialog components within a Razor file.

```razor
<BbButton Variant="ButtonVariant.Default">Click me</BbButton>

<BbDialog>
    <BbDialogTrigger>
        <BbButton>Open Dialog</BbButton>
    </BbDialogTrigger>
    <BbDialogContent>
        <BbDialogHeader>
            <BbDialogTitle>Welcome</BbDialogTitle>
            <BbDialogDescription>
                Beautiful Blazor components inspired by shadcn/ui.
            </BbDialogDescription>
        </BbDialogHeader>
        <BbDialogFooter>
            <BbDialogClose>
                <BbButton Variant="ButtonVariant.Outline">Close</BbButton>
            </BbDialogClose>
        </BbDialogFooter>
    </BbDialogContent>
</BbDialog>
```

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

### FormFieldSelect Component: Options Mode (v3 - Alternative)

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

An alternative v3 example for FormFieldSelect using the Options approach, demonstrating the simplified setup for data binding.

```razor
<BbFormFieldSelect TValue="string"
                   @bind-Value="_country"
                   Label="Country"
                   Placeholder="Select..."
                   Options="_countryOptions" />

@code {
    private readonly SelectOption<string>[] _countryOptions =
    [
        new("us", "United States"),
        new("ca", "Canada")
    ];
}
```

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

### Add MCP Server via npx

Source: https://github.com/blazorblueprintui/ui/blob/main/README.md

Install the MCP server for AI integration using the npx package manager.

```bash
npx blazorblueprint add mcp-server
```

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

### Guid Select with Options

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Select/value-label-pairs.txt

This snippet demonstrates how to use the Select component with Guid values. It includes binding to a selected Guid value and providing a list of project options.

```csharp
private readonly SelectOption<Guid?>[] projectOptions =
[
    new(Project1Id, "Website Redesign"),
    new(Project2Id, "Mobile App"),
    new(Project3Id, "API Migration")
];
```

```razor
<BbSelect TValue="Guid?"
        @bind-Value="selectedProjectId"
        Options="@projectOptions"
        Placeholder="Select a project"
        Class="w-[280px]" />
```

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

### BlazorHeroicons Basic Usage Examples

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Icons.Heroicons/README.md

Illustrates how to import the namespace and render Heroicons in various ways, including different variants, sizes, and colors.

```APIDOC
## Basic Usage

### Import the Namespace

Add to `_Imports.razor`:

```razor
@using BlazorBlueprint.Icons.Heroicons.Components
```

### Render an Icon

```razor
@* Default variant (Outline) *@
<HeroIcon Name="camera" />
```

### Use Different Variants

```razor
@* Outline variant (24x24) - default *@
<HeroIcon Name="camera" Variant="HeroIconVariant.Outline" />

@* Solid variant (24x24) *@
<HeroIcon Name="camera" Variant="HeroIconVariant.Solid" />

@* Mini variant (20x20) *@
<HeroIcon Name="camera" Variant="HeroIconVariant.Mini" />

@* Micro variant (16x16) *@
<HeroIcon Name="camera" Variant="HeroIconVariant.Micro" />
```

### Customize Size and Color

```razor
<HeroIcon Name="heart" Size="32" Color="red" Variant="HeroIconVariant.Solid" />
```

### Use with CSS Variables (Theming)

```razor
<HeroIcon Name="sun" Color="var(--primary)" />
```

### Icon-Only Button (with Accessibility)

```razor
<button aria-label="Take Photo">
    <HeroIcon Name="camera" />
</button>
```

### Integration with BlazorBlueprint Button Component

```razor
<Button>
    <Icon>
        <HeroIcon Name="camera" Size="20" Variant="HeroIconVariant.Solid" />
    </Icon>
    Take Photo
</Button>
```
```

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

### Run Tests with xunit and Verify

Source: https://github.com/blazorblueprintui/ui/blob/main/CLAUDE.md

Executes all tests in the solution, including xunit and Verify snapshot tests. Use 'normal' verbosity to see test output.

```bash
dotnet test tests/BlazorBlueprint.Tests/BlazorBlueprint.Tests.csproj --verbosity normal
```

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

### Blazor Context Menu Example

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/ContextMenu/labels-and-groups.txt

Demonstrates how to implement a context menu with various options. Use this component to provide a right-click menu for specific elements.

```cshtml
<BbContextMenu>
    <BbContextMenuTrigger>
        <div>Right click here</div>
    </BbContextMenuTrigger>
    <BbContextMenuContent>
        <BbContextMenuLabel>Edit</BbContextMenuLabel>
        <BbContextMenuItem>Cut</BbContextMenuItem>
        <BbContextMenuItem>Copy</BbContextMenuItem>
        <BbContextMenuSeparator />
        <BbContextMenuLabel>View</BbContextMenuLabel>
        <BbContextMenuItem>Zoom In</BbContextMenuItem>
    </BbContextMenuContent>
</BbContextMenu>
```

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

### Implement BbTooltip with Top Start Alignment

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Primitives/Tooltip/alignment.txt

Displays a tooltip positioned at the top start of the trigger element.

```razor
<BbTooltip>
    <BbTooltipTrigger>Top Start</BbTooltipTrigger>
    <BbTooltipContent Side="@PopoverSide.Top" Align="@PopoverAlign.Start">
        Aligned to start
    </BbTooltipContent>
</BbTooltip>
```

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

### Blazor Card Component Example

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Card/action-buttons.txt

Demonstrates the structure and usage of the BbCard component, including header, content, and footer with buttons.

```razor
<BbCard>
    <BbCardHeader>
        <BbCardTitle>Create Project</BbCardTitle>
        <BbCardDescription>Deploy your new project in one-click.</BbCardDescription>
    </BbCardHeader>
    <BbCardContent>
        <p>Your project will be created with default settings.</p>
    </BbCardContent>
    <BbCardFooter Class="gap-2">
        <BbButton Variant="ButtonVariant.Outline">Cancel</BbButton>
        <BbButton>Deploy</BbButton>
    </BbCardFooter>
</BbCard>
```

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

### Conventional Commits Examples

Source: https://github.com/blazorblueprintui/ui/blob/main/CONTRIBUTING.md

Examples of commit messages following the Conventional Commits specification for different types of changes.

```git
feat(Combobox): add SearchQuery parameter for async filtering
fix(InputOTP): implement paste support via JS interop
docs: add CONTRIBUTING.md
```

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

### Align BbDropdownMenuContent to Start

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/DropdownMenu/alignment.txt

Use BbDropdownMenuContent with Align set to PopoverAlign.Start to align the dropdown menu content to the start.

```razor
<BbDropdownMenuContent Align="@PopoverAlign.Start">
    <BbDropdownMenuItem>Item 1</BbDropdownMenuItem>
</BbDropdownMenuContent>
```

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

### Left Sheet Example

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Primitives/Sheet/sides.txt

Example of a sheet component sliding in from the left. The ellipsis indicates similar structure to the top sheet.

```razor
<BbSheet Side="SheetSide.Left">...</BbSheet>
```

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

### Bottom Sheet Example

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Primitives/Sheet/sides.txt

Example of a sheet component sliding in from the bottom. The ellipsis indicates similar structure to the top sheet.

```razor
<BbSheet Side="SheetSide.Bottom">...</BbSheet>
```

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

### Right Sheet Example

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Primitives/Sheet/sides.txt

Example of a sheet component sliding in from the right side. The ellipsis indicates similar structure to the top sheet.

```razor
<BbSheet Side="SheetSide.Right">...</BbSheet>
```

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

### BbFormFieldMultiSelect Example

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/FormFieldMultiSelect/disabled.txt

Example of using BbFormFieldMultiSelect with string values, predefined options, and specific styling. The component is disabled and requires specific skills.

```razor
<BbFormFieldMultiSelect TValue="string"
                      Options="_languages"
                      Values="@(new[] { "csharp", "typescript" })"
                      Label="Required skills"
                      HelperText="These skills are required for this role."
                      MatchTriggerWidth="true"
                      InputClass="w-full"
                      Disabled="true" />
```

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

### Basic Blazor Dialog Implementation

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Dialog/simple.txt

Demonstrates the basic structure of a Blazor dialog using BbDialog, BbDialogTrigger, and BbDialogContent components. This setup includes a header with a title and description.

```razor
<BbDialog>
    <BbDialogTrigger>Open Dialog</BbDialogTrigger>
    <BbDialogContent>
        <BbDialogHeader>
            <BbDialogTitle>Are you absolutely sure?</BbDialogTitle>
            <BbDialogDescription>
                This action cannot be undone.
            </BbDialogDescription>
        </BbDialogHeader>
    </BbDialogContent>
</BbDialog>
```

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

### BbFormFieldInputOTP Example

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/FormFieldInputOTP/disabled.txt

Example of using the BbFormFieldInputOTP component with a locked and disabled state. Set the 'Disabled' attribute to 'true' to prevent user interaction.

```razor
<BbFormFieldInputOTP Value="123456"
                    Label="Code (locked)"
                    HelperText="Already verified."
                    Disabled="true" />
```

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

### Pagination: Use Shorthand Parameters

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Demonstrates the simplified `BbPagination` component using `TotalPages` and `@bind-CurrentPage` for automatic rendering of prev/pages/next navigation.

```diff
- <Pagination State="@_state" OnPageChanged="HandlePageChanged">
-     <PaginationContent>
-         <PaginationItem><PaginationPrevious /></PaginationItem>
-         @for (var i = 1; i <= _totalPages; i++)
-         {
-             var page = i;
-             <PaginationItem>
-                 <PaginationLink IsActive="@(_currentPage == page)" OnClick="@(() => GoToPage(page))">
-                     @page
-                 </PaginationLink>
-             </PaginationItem>
-         }
-         <PaginationItem><PaginationNext /></PaginationItem>
-     </PaginationContent>
- </Pagination>
+ <BbPagination TotalPages="@_totalPages" @bind-CurrentPage="_currentPage" />
```

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

### Accept New API Surface Snapshots

Source: https://github.com/blazorblueprintui/ui/blob/main/CLAUDE.md

After reviewing .received.txt files, use this command to accept new API surface snapshots by copying them to .verified.txt. This script is located in the ./scripts directory.

```bash
./scripts/run-tests.sh --accept
```

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

### Kanban Board State Initialization

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Sortable/kanban.txt

Initializes the Kanban board with predefined columns and tasks. Includes 'To Do', 'In Progress', and 'Done' columns with sample tasks.

```csharp
private List<KanbanColumn> _columns =
[
    new("To Do",
    [
        new("Design system audit", "High"),
        new("Update README", "Low"),
        new("Fix login bug", "High"),
    ]),
    new("In Progress",
    [
        new("Build sortable demo", "Medium"),
        new("Write unit tests", "Medium"),
    ]),
    new("Done",
    [
        new("Project setup", "Low"),
        new("CI pipeline", "Medium"),
    ]),
];
```

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

### Run Blazor Blueprint Demo Applications

Source: https://github.com/blazorblueprintui/ui/blob/main/README.md

Execute demo applications for Blazor Server, WebAssembly, and Auto render modes using the `dotnet run` command.

```bash
dotnet run --project demos/BlazorBlueprint.Demo.Server
```

```bash
dotnet run --project demos/BlazorBlueprint.Demo.Wasm
```

```bash
dotnet run --project demos/BlazorBlueprint.Demo.Auto
```

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

### Render an Accessible Icon-Only Button (API Example)

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Icons.Feather/README.md

Provides an example of an icon-only button where accessibility is handled by the `AriaLabel` parameter, which is applied directly to the icon's SVG element.

```razor
<button>
    <FeatherIcon Name="trash" AriaLabel="Delete item" />
</button>
```

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

### Build Blazor Components Project

Source: https://github.com/blazorblueprintui/ui/blob/main/CLAUDE.md

Use this command to build the Components project, which is common during development. It uses a quiet verbosity level.

```bash
dotnet build src/BlazorBlueprint.Components/BlazorBlueprint.Components.csproj --nologo --verbosity quiet
```

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

### Bind Guid Value and Handle Parse Errors in BbInputField

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/InputField/guid.txt

Use @bind-Value to bind a Guid property and OnParseError to handle invalid format. The component's HasParseError property can be used to conditionally display error messages.

```razor
<BbInputField @ref="_guidInput" TValue="Guid" @bind-Value="_guidValue" OnParseError="HandleGuidError" />
@if (_guidInput?.HasParseError == true)
{
    <p>Invalid GUID format.</p>
}
```

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

### Test Release Workflow with NUGET_API_KEY

Source: https://github.com/blazorblueprintui/ui/blob/main/RELEASE.md

After setting up the NUGET_API_KEY in GitHub Secrets, run this command to test the release script and verify the workflow.

```bash
./scripts/release-primitives.sh 1.0.0-beta.1
```

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

### Blazor Multi-Select Form Field Example

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/FormFieldMultiSelect/non-string.txt

Demonstrates how to use the BbFormFieldMultiSelect component with integer values. Configure options, bind selected values, and set various UI properties like labels and placeholders. The example also shows how to define the data source for the select options.

```razor
<BbFormFieldMultiSelect TValue="int"
                      Options="_permissions"
                      @bind-Values="_selectedPermissions"
                      Label="Permissions"
                      Placeholder="Select permissions..."
                      SearchPlaceholder="Search permissions..."
                      HelperText="Assign permissions to this role."
                      MatchTriggerWidth="true"
                      InputClass="w-full" />

@code {
    private IEnumerable<int>? _selectedPermissions;

    private readonly SelectOption<int>[] _permissions =
    [
        new(1, "Read"),
        new(2, "Write"),
        new(3, "Delete"),
        new(4, "Admin")
    ];

    // _permissions.GetTexts(_selectedPermissions)
}
```

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

### Separator Example

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Components/README.md

A simple separator component that can be oriented horizontally or vertically.

```razor
<BbSeparator Orientation="SeparatorOrientation.Horizontal" />
```

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

### LineChart Example

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Components/Components/Chart/README.md

Demonstrates how to create a line chart with multiple data series. Configure axes, tooltips, and line styles using nested components. Ensure data is provided via the `Data` parameter.

```razor
<LineChart Data="@data" Height="300px">
    <XAxis DataKey="month" />
    <YAxis />
    <ChartTooltip />
    <Line DataKey="desktop" Name="Desktop" Color="var(--chart-1)" />
    <Line DataKey="mobile" Name="Mobile" Color="var(--chart-2)" Curve="CurveType.Smooth" />
</LineChart>
```

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

### FormFieldMultiSelect v2 Example

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

v2 usage of FormFieldMultiSelect with Items, ValueSelector, and DisplaySelector.

```razor
<FormFieldMultiSelect TItem="Skill"
                      Items="skills"
                      @bind-Values="_selectedSkills"
                      ValueSelector="@(s => s.Id)"
                      DisplaySelector="@(s => s.Name)"
                      Label="Skills"
                      Placeholder="Select skills..." />
```

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

### Basic BbSheet Implementation

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Sheet/side-right.txt

Demonstrates the basic structure of the BbSheet component, including a trigger button, header with title and description, and a footer with an action button. No specific setup or imports are required beyond the component's availability.

```html
<BbSheet>
    <BbSheetTrigger>
        <BbButton Variant="ButtonVariant.Outline">Open Sheet</BbButton>
    </BbSheetTrigger>
    <BbSheetContent>
        <BbSheetHeader>
            <BbSheetTitle>Edit profile</BbSheetTitle>
            <BbSheetDescription>
                Make changes to your profile here.
            </BbSheetDescription>
        </BbSheetHeader>
        <BbSheetFooter>
            <BbButton>Save changes</BbButton>
        </BbSheetFooter>
    </BbSheetContent>
</BbSheet>
```

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

### Basic Context Menu Implementation

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/ContextMenu/icon-shorthand.txt

This snippet demonstrates how to create a basic context menu. It includes a trigger element and a content area with menu items. Ensure you have the necessary Icon and LucideIcon components available.

```razor
<BbContextMenu>
    <BbContextMenuTrigger>
        <div>Right click here</div>
    </BbContextMenuTrigger>
    <BbContextMenuContent>
        <BbContextMenuItem>
            <Icon><LucideIcon Name="scissors" Size="16" /></Icon>
            <ChildContent>Cut</ChildContent>
        </BbContextMenuItem>
        <BbContextMenuItem>
            <Icon><LucideIcon Name="copy" Size="16" /></Icon>
            <ChildContent>Copy</ChildContent>
        </BbContextMenuItem>
    </BbContextMenuContent>
</BbContextMenu>
```

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

### Component Prefixing: Before

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Example of Blazor component usage before the 'Bb' prefix was introduced.

```razor
<Dialog @bind-Open="_open">
    <DialogTrigger>
        <Button>Open</Button>
    </DialogTrigger>
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Title</DialogTitle>
            <DialogDescription>Description</DialogDescription>
        </DialogHeader>
    </DialogContent>
</Dialog>
```

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

### Basic Blazor Timeline

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Timeline/heading-composition.txt

Demonstrates a simple timeline with a heading and description for each item. Use this for straightforward event logging.

```cshtml
<BbTimeline Align="TimelineAlign.Left">
    <BbTimelineItem>
        <ChildContent>
            <BbTimelineContent>
                <BbTimelineHeader>
                    <BbTimelineTitle As="h4">Project Kickoff</BbTimelineTitle>
                </BbTimelineHeader>
                <BbTimelineDescription>Initial planning and team formation.</BbTimelineDescription>
            </BbTimelineContent>
        </ChildContent>
    </BbTimelineItem>
</BbTimeline>
```

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

### Default BbBadge

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Badge/notification-dot.txt

A basic BbBadge with a dot indicator. No special setup is required.

```html
<BbBadge ShowDot>Default</BbBadge>
```

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

### Basic Select Component Usage

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Primitives/Select/basic.txt

Demonstrates the basic setup of the BbSelect component with string values. Configure item styling using ItemClass and trigger/content appearance with specific classes.

```razor
@using BlazorBlueprint.Primitives.Select

<BbSelect TValue="string" @bind-Value="value"
        ItemClass="px-3 py-2 cursor-pointer hover:bg-accent">
    <BbSelectTrigger class="...">
        <BbSelectValue Placeholder="Select a fruit..." />
        <span>&#9660;</span>
    </BbSelectTrigger>
    <BbSelectContent class="...">
        <BbSelectItem Value="@("apple")" Text="Apple" />
        <BbSelectItem Value="@("banana")" Text="Banana" />
    </BbSelectContent>
</BbSelect>

@* Value is the data value (hidden). Text is the display text shown in trigger. 
   ItemClass applies shared styling to all items. *@
```

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

### Basic Form Wizard Implementation

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/FormWizard/controlled.txt

Demonstrates a basic Blazor Form Wizard with three steps: Overview, Details, and Summary. Use the BbButton components to navigate between steps programmatically.

```razor
<div class="flex gap-2 mb-4">
    <BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small"
              OnClick="() => _step = 0">Go to Step 1</BbButton>
    <BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small"
              OnClick="() => _step = 1">Go to Step 2</BbButton>
    <BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small"
              OnClick="() => _step = 2">Go to Step 3</BbButton>
</div>

<BbFormWizard @bind-CurrentStep="_step" AllowSkipAhead="true">
    <BbWizardStep Title="Overview">
        <p>This is the overview step.</p>
    </BbWizardStep>
    <BbWizardStep Title="Details">
        <p>This is the details step.</p>
    </BbWizardStep>
    <BbWizardStep Title="Summary">
        <p>This is the summary step.</p>
    </BbWizardStep>
</BbFormWizard>
```

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

### Run Blazor Blueprint Demo Apps

Source: https://github.com/blazorblueprintui/ui/blob/main/CLAUDE.md

Commands to run the different demo applications for Blazor Blueprint, each on a specific port.

```bash
dotnet run --project demos/BlazorBlueprint.Demo.Server    # port 7172
```

```bash
dotnet run --project demos/BlazorBlueprint.Demo.Wasm      # port 7173
```

```bash
dotnet run --project demos/BlazorBlueprint.Demo.Auto       # port 7174
```

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

### v2 AlertDialog for Confirmations

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Illustrates the manual AlertDialog setup for a confirmation flow in v2. This approach requires more markup for simple confirmations.

```razor
<AlertDialog @bind-Open="_showDeleteDialog">
    <AlertDialogTrigger>
        <Button Variant="ButtonVariant.Destructive">Delete Item</Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
        <AlertDialogHeader>
            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction OnClick="HandleDelete">Delete</AlertDialogAction>
        </AlertDialogFooter>
    </AlertDialogContent>
</AlertDialog>

@code {
    private bool _showDeleteDialog;

    private async Task HandleDelete(MouseEventArgs e)
    {
        // perform delete
    }
}
```

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

### SelectItem TextValue Renamed to Text

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Example of renaming the primitive-layer SelectItem.TextValue parameter to Text for consistency.

```diff
- <BbSelectItem Value="@("apple")" TextValue="Apple">Apple</BbSelectItem>
+ <BbSelectItem Value="@("apple")" Text="Apple" />
```

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

### Blazor Form Wizard Example

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/FormWizard/optional.txt

Demonstrates the structure of a Blazor Form Wizard with multiple steps, including input fields and optional steps. Ensure DataAnnotationsValidator is included for validation.

```cshtml
<EditForm Model="_model">
    <DataAnnotationsValidator />
    <BbFormWizard OnComplete="HandleSubmit">
        <BbWizardStep Title="Required Info" Icon="user"
                      FieldNames='@(new[] { "FullName" })'>
            <BbFormFieldInput TValue="string"
                              @bind-Value="_model.FullName"
                              Label="Full Name" />
        </BbWizardStep>
        <BbWizardStep Title="Preferences" Icon="palette"
                      IsOptional="true"
                      FieldNames='@(new[] { "Theme" })'>
            <BbFormFieldSelect TValue="string"
                               @bind-Value="_model.Theme"
                               Label="Theme Preference"
                               Placeholder="Select a theme..."
                               Options="_themeOptions" />
        </BbWizardStep>
        <BbWizardStep Title="Done" Icon="circle-check">
            <p>You're all set!</p>
        </BbWizardStep>
    </BbFormWizard>
</EditForm>
```

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

### DialogTrigger With Child Component

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Example of BbDialogTrigger when already providing a child component, which requires no changes.

```razor
@* This already works — no changes required *@
<BbDialogTrigger>
    <BbButton>Open Dialog</BbButton>
</BbDialogTrigger>
```

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

### Basic Dialog with Trigger and Custom Content

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Dialog/custom-width.txt

This example demonstrates how to implement a basic dialog with a trigger button and custom content within the dialog body. The `BbDialogContent` allows for flexible layout, and `BbDialogHeader` can contain titles and descriptions.

```html
<BbDialog>
    <BbDialogTrigger>Open Wide Dialog</BbDialogTrigger>
    <BbDialogContent Class="max-w-3xl">
        <BbDialogHeader>
            <BbDialogTitle>Wide Dialog</BbDialogTitle>
            <BbDialogDescription>
                This dialog uses a custom max-width class.
            </BbDialogDescription>
        </BbDialogHeader>
    </BbDialogContent>
</BbDialog>
```

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

### v3 FormFieldCombobox Component - Compositional Mode

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Example of the v3 FormFieldCombobox component in Compositional mode.

```razor
<BbFormFieldCombobox TValue="string"
                   @bind-Value="_country"
                   Label="Country"
                   Placeholder="Select a country...">
    <BbComboboxItem Value="@("us")" Text="United States">
        <span class="flex items-center gap-2">United States</span>
    </BbComboboxItem>
    <BbComboboxItem Value="@("ca")" Text="Canada">
        <span class="flex items-center gap-2">Canada</span>
    </BbComboboxItem>
</BbFormFieldCombobox>
```

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

### v3 FormFieldCombobox Component - Options Mode

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Example of the v3 FormFieldCombobox component in Options mode.

```razor
<BbFormFieldCombobox TValue="string"
                   Options="_countryOptions"
                   @bind-Value="_country"
                   Label="Country"
                   Placeholder="Select a country..." />

@code {
    private readonly SelectOption<string>[] _countryOptions =
    [
        new("us", "United States"),
        new("ca", "Canada")
    ];
}
```

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

### Manual NuGet Package Release

Source: https://github.com/blazorblueprintui/ui/blob/main/RELEASE.md

Fallback procedure for building and publishing packages manually when automation fails.

```bash
# Build and pack
dotnet pack src/BlazorBlueprint.Primitives/BlazorBlueprint.Primitives.csproj -c Release -o ./packages

# Publish to NuGet
dotnet nuget push ./packages/BlazorBlueprint.Primitives.*.nupkg --api-key YOUR_API_KEY --source https://api.nuget.org/v3/index.json
```

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

### v2 FormFieldCombobox Component

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Example of the v2 FormFieldCombobox component using Items, ValueSelector, and DisplaySelector.

```razor
<FormFieldCombobox TItem="Country"
                   Items="countries"
                   @bind-Value="_country"
                   ValueSelector="@(c => c.Code)"
                   DisplaySelector="@(c => c.Name)"
                   Label="Country"
                   Placeholder="Select a country..." />
```

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

### Blazor Dialog with Dropdown Example

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Dialog/dropdown-controls.txt

Demonstrates how to create a Blazor dialog with a dropdown. Ensure the 'BbSelect' and 'BbDialog' components are correctly imported and configured.

```razor
<BbDialog>
    <BbDialogTrigger>Open Dialog with Dropdowns</BbDialogTrigger>
    <BbDialogContent>
        <BbDialogHeader>
            <BbDialogTitle>Nested Dropdown Controls</BbDialogTitle>
        </BbDialogHeader>
        <div class="grid gap-4 py-4">
            <BbSelect @bind-Value="selectedDialogFruit" TValue="string">
                <BbSelectTrigger>
                    <BbSelectValue Placeholder="Select a fruit..." />
                </BbSelectTrigger>
                <BbSelectContent>
                    <BbSelectItem Value="@("apple")" Text="Apple" TValue="string">Apple</BbSelectItem>
                </BbSelectContent>
            </BbSelect>
        </div>
    </BbDialogContent>
</BbDialog>
```

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

### Basic Usage

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Icons.Lucide/README.md

Learn how to import the necessary namespace and render icons in your Blazor components.

```APIDOC
## Basic Usage

### Import the Namespace

Add to `_Imports.razor`:

```razor
@using BlazorBlueprint.Icons.Lucide.Components
```

### Render an Icon

```razor
<LucideIcon Name="camera" />
```

### Customize Size and Color

```razor
<LucideIcon Name="heart" Size="32" Color="red" />
```

### Use with CSS Variables (Theming)

```razor
<LucideIcon Name="sun" Color="var(--primary)" />
```

### Icon-Only Button (with Accessibility)

```razor
<button aria-label="Take Photo">
    <LucideIcon Name="camera" />
</button>
```

### Integration with BlazorBlueprint Button Component

```razor
<Button>
    <Icon>
        <LucideIcon Name="camera" Size="20" />
    </Icon>
    Take Photo
</Button>
```
```

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

### v2 MultiSelect Component

Source: https://github.com/blazorblueprintui/ui/blob/main/V3-MIGRATION-GUIDE.md

Example of the v2 MultiSelect component using Items, ValueSelector, and DisplaySelector.

```razor
<MultiSelect TItem="Framework"
             Items="frameworks"
             @bind-Values="selectedValues"
             ValueSelector="@(f => f.Value)"
             DisplaySelector="@(f => f.Label)"
             Placeholder="Select frameworks..."
             SearchPlaceholder="Search..." />

@code {
    private IEnumerable<string>? selectedValues;
    private List<Framework> frameworks = new()
    {
        new("blazor", "Blazor"),
        new("react", "React"),
        new("vue", "Vue.js")
    };
    public record Framework(string Value, string Label);
}
```

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

### Run Package Release Scripts

Source: https://github.com/blazorblueprintui/ui/blob/main/RELEASE.md

Execute these scripts to initiate the release process for individual Blazor Blueprint packages. Specify the desired version as an argument.

```bash
./scripts/release-primitives.sh 1.0.0-beta.4
./scripts/release-components.sh 1.1.0-beta.2
./scripts/release-icons-lucide.sh 1.0.3
./scripts/release-icons-heroicons.sh 1.0.0-beta.1
./scripts/release-icons-feather.sh 1.0.0-beta.1
```

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

### Uncontrolled Dialog Example

Source: https://github.com/blazorblueprintui/ui/blob/main/src/BlazorBlueprint.Primitives/README.md

Demonstrates an uncontrolled dialog component where the component manages its own open/closed state.

```razor
<BbDialog>
    <BbDialogTrigger>Open</BbDialogTrigger>
    <BbDialogPortal>
        <BbDialogOverlay />
        <BbDialogContent>Content</BbDialogContent>
    </BbDialogPortal>
</BbDialog>
```

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

### Complete Blazor Blueprint UI Theme Example

Source: https://github.com/blazorblueprintui/ui/blob/main/THEMING.md

This CSS file defines all theme variables for both light and dark modes. Customize these variables to create your own theme.

```css
/* my-theme.css */

:root {
  /* Core */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);

  /* Semantic */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);

  /* UI Elements */
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);

  /* Components */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);

  /* Sizing */
  --radius: 0.5rem;
}

.dark {
  /* Core */
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);

  /* Semantic */
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);

  /* UI Elements */
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.556 0 0);

  /* Components */
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
}

```

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

### Blazor EditForm with Input Group

Source: https://github.com/blazorblueprintui/ui/blob/main/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/InputGroup/editform-validation.txt

Example of an EditForm using BbInputGroup for email input with validation.

```cshtml
<EditForm Model="formModel" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <BbInputGroup>
        <BbInputGroupAddon Align="InputGroupAlign.InlineStart">
            <LucideIcon Name="at-sign" Size="16" />
        </BbInputGroupAddon>
        <BbInputGroupInput @bind-Value="formModel.Email" />
    </BbInputGroup>
    <ValidationMessage For="@(() => formModel.Email)" />
</EditForm>
```