### Install BlazyUI Package

Source: https://github.com/ogix/blazyui/blob/main/README.md

Installs the BlazyUI NuGet package into your .NET project. This is the first step to start using the BlazyUI components.

```bash
dotnet add package BlazyUI
```

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

### BlazyUI NavBar HTML Output Example

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-navbar-design.md

Shows the resulting HTML structure generated by the BlazyUI NavBar component when specific parameters are applied. This example includes classes for color, sticky positioning, and shadow.

```html
<nav class="navbar bg-primary text-primary-content sticky top-0 z-50 shadow-sm">
    <div class="navbar-start">...</div>
    <div class="navbar-center">...</div>
    <div class="navbar-end">...</div>
</nav>
```

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

### Run BlazyUI Demo Application

Source: https://github.com/ogix/blazyui/blob/main/README.md

Details the steps to run the BlazyUI demo application after cloning and building the project. It includes navigating to the demo directory, installing Node.js dependencies, and executing the run command.

```bash
# Run the demo app
cd src/BlazyUI.Demo
npm install
dotnet run
```

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

### BlazyLoading Component Examples

Source: https://context7.com/ogix/blazyui/llms.txt

Demonstrates the usage of the BlazyLoading component with different animation types, sizes, and colors. It also shows how to use it as a loading overlay. This component requires no external dependencies beyond the BlazyUI library.

```razor
@* Loading types *@
<BlazyLoading Type="BlazyLoadingType.Spinner" />
<BlazyLoading Type="BlazyLoadingType.Dots" />
<BlazyLoading Type="BlazyLoadingType.Ring" />
<BlazyLoading Type="BlazyLoadingType.Ball" />
<BlazyLoading Type="BlazyLoadingType.Bars" />
<BlazyLoading Type="BlazyLoadingType.Infinity" />

@* Sizes *@
<BlazyLoading Type="BlazyLoadingType.Spinner" Size="BlazyLoadingSize.ExtraSmall" />
<BlazyLoading Type="BlazyLoadingType.Spinner" Size="BlazyLoadingSize.Small" />
<BlazyLoading Type="BlazyLoadingType.Spinner" Size="BlazyLoadingSize.Medium" />
<BlazyLoading Type="BlazyLoadingType.Spinner" Size="BlazyLoadingSize.Large" />
<BlazyLoading Type="BlazyLoadingType.Spinner" Size="BlazyLoadingSize.ExtraLarge" />

@* Colors *@
<BlazyLoading Type="BlazyLoadingType.Spinner" Color="BlazyLoadingColor.Primary" />
<BlazyLoading Type="BlazyLoadingType.Dots" Color="BlazyLoadingColor.Secondary" />
<BlazyLoading Type="BlazyLoadingType.Ring" Color="BlazyLoadingColor.Accent" />
<BlazyLoading Type="BlazyLoadingType.Ball" Color="BlazyLoadingColor.Success" />

@* Loading overlay pattern *@
@if (isLoading)
{
    <div class="fixed inset-0 bg-base-300/50 flex items-center justify-center z-50">
        <BlazyLoading Type="BlazyLoadingType.Spinner" Size="BlazyLoadingSize.Large" Color="BlazyLoadingColor.Primary" />
    </div>
}

@code {
    private bool isLoading = false;
}
```

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

### BlazySelect Examples

Source: https://context7.com/ogix/blazyui/llms.txt

Illustrates the usage of the BlazySelect component, including basic dropdowns, styling with colors and sizes, ghost mode, and integration with Blazor's EditForm for validation.

```razor
@* Basic select *@
<BlazySelect @bind-Value="selectedCountry">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
    <option value="au">Australia</option>
</BlazySelect>

@* With color and size *@
<BlazySelect @bind-Value="selectedSize" Color="BlazySelectColor.Primary" Size="BlazySelectSize.Large">
    <option value="">Choose size</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
</BlazySelect>

@* Ghost style *@
<BlazySelect @bind-Value="selectedOption" Ghost="true">
    <option value="">Ghost select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</BlazySelect>

@* In EditForm with validation *@
<EditForm Model="order" OnValidSubmit="SubmitOrder">
    <DataAnnotationsValidator />

    <BlazyLabel Text="Product Category">
        <BlazySelect @bind-Value="order.Category" Color="BlazySelectColor.Secondary">
            <option value="">Select category</option>
            <option value="electronics">Electronics</option>
            <option value="clothing">Clothing</option>
            <option value="books">Books</option>
        </BlazySelect>
        <ValidationMessage For="@(() => order.Category)" />
    </BlazyLabel>

    <BlazyButton type="submit" Color="BlazyButtonColor.Primary">Submit</BlazyButton>
</EditForm>

@code {
    private string selectedCountry = "";
    private string selectedSize = "";
    private string selectedOption = "";
    private OrderModel order = new();

    private async Task SubmitOrder() { }

    public class OrderModel
    {
        [Required]
        public string Category { get; set; } = "";
    }
}
```

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

### BlazyUI Loading Component Examples (Razor)

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-loading-design.md

Demonstrates various ways to use the BlazyUI Loading component in Razor syntax. Includes examples for default usage, specifying loading types, sizes, colors, and accessibility attributes.

```razor
<!-- Default: Spinner, Medium, inherits color -->
<Loading />

<!-- Explicit type -->
<Loading Type="LoadingType.Dots" />
<Loading Type="LoadingType.Ring" />
<Loading Type="LoadingType.Ball" />
<Loading Type="LoadingType.Bars" />
<Loading Type="LoadingType.Infinity" />

<!-- Different sizes -->
<Loading Size="LoadingSize.ExtraSmall" />
<Loading Size="LoadingSize.Small" />
<Loading Size="LoadingSize.Large" />
<Loading Size="LoadingSize.ExtraLarge" />

<!-- With color -->
<Loading Color="LoadingColor.Primary" />
<Loading Type="LoadingType.Bars" Color="LoadingColor.Success" />

<!-- Custom aria-label -->
<Loading aria-label="Saving your changes" />

<!-- Combined with custom class -->
<Loading Type="LoadingType.Infinity" Class="my-4" />
```

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

### BlazyTextInput Examples

Source: https://context7.com/ogix/blazyui/llms.txt

Demonstrates various configurations of the BlazyTextInput component, including different input types, sizes, colors, and ghost styling. It also shows integration with Blazor's EditForm for validation using DataAnnotations.

```razor
@* Basic text inputs *@
<BlazyTextInput @bind-Value="username" placeholder="Enter username" />
<BlazyTextInput @bind-Value="email" Type="email" placeholder="Enter email" />
<BlazyTextInput @bind-Value="password" Type="password" placeholder="Enter password" />

@* Size variants *@
<BlazyTextInput @bind-Value="text" Size="BlazyTextInputSize.Small" placeholder="Small input" />
<BlazyTextInput @bind-Value="text" Size="BlazyTextInputSize.Large" placeholder="Large input" />

@* Color variants *@
<BlazyTextInput @bind-Value="text" Color="BlazyTextInputColor.Primary" placeholder="Primary" />
<BlazyTextInput @bind-Value="text" Color="BlazyTextInputColor.Success" placeholder="Success" />

@* Ghost style (no background) *@
<BlazyTextInput @bind-Value="text" Ghost="true" placeholder="Ghost input" />

@* With EditForm validation *@
<EditForm Model="model" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />

    <BlazyFieldset Legend="User Registration">
        <BlazyLabel Text="Email" Position="BlazyLabelPosition.Top">
            <BlazyTextInput @bind-Value="model.Email" Type="email" placeholder="user@example.com" />
            <ValidationMessage For="@(() => model.Email)" />
        </BlazyLabel>

        <BlazyLabel Text="Password" Position="BlazyLabelPosition.Top">
            <BlazyTextInput @bind-Value="model.Password" Type="password" />
            <ValidationMessage For="@(() => model.Password)" />
        </BlazyLabel>
    </BlazyFieldset>

    <BlazyButton type="submit" Color="BlazyButtonColor.Primary">Register</BlazyButton>
</EditForm>

@code {
    private string username = "";
    private string email = "";
    private string password = "";
    private string text = "";
    private RegistrationModel model = new();

    private async Task HandleSubmit()
    {
        // Process form submission
    }

    public class RegistrationModel
    {
        [Required, EmailAddress]
        public string Email { get; set; } = "";

        [Required, MinLength(8)]
        public string Password { get; set; } = "";
    }
}
```

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

### Production Build Command

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-tailwind-daisyui-setup-design.md

Commands to build and publish the Blazor application in Release configuration. This prepares the project for deployment.

```bash
dotnet build -c Release
dotnet publish -c Release
```

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

### Blazor Button Component Usage Examples

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-button-component-design.md

Illustrates various ways to use the BlazyUI button component in Blazor applications. Examples cover basic usage, styling with different colors and sizes, incorporating loading states, creating icon buttons, and applying custom CSS classes.

```razor
@* Basic *@
<Button>Click me</Button>

@* Styled *@
<Button Color="ButtonColor.Primary" Size="ButtonSize.Large">
    Submit
</Button>

@* Outline with loading *@
<Button Style="ButtonStyle.Outline" Color="ButtonColor.Secondary" Loading="@isLoading">
    Save
</Button>

@* Icon button *@
<Button Circle Color="ButtonColor.Primary">
    <svg>...</svg>
</Button>

@* With custom classes *@
<Button Color="ButtonColor.Primary" Class="my-custom-class">
    Custom
</Button>
```

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

### Run Demo App with dotnet run in Bash

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-phase1-foundation.md

Starts the BlazyUI demo application using the .NET CLI. This command compiles and runs the demo project, allowing for visual verification of components in a local environment. The output typically includes the URL where the application can be accessed.

```bash
cd src/BlazyUI.Demo && dotnet run
```

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

### Development Workflow for CSS and Blazor

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-tailwind-daisyui-setup-design.md

Commands to initiate the development workflow. One terminal runs a script to watch for CSS changes and rebuild, while another runs the Blazor application with hot-reloading enabled.

```bash
# Terminal 1: CSS watcher
cd src/BlazyUI.Demo
npm run watch:css

# Terminal 2: Blazor app
dotnet watch --project src/BlazyUI.Demo
```

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

### Blazor Alert Component Usage Examples

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-alert-component-design.md

Demonstrates various ways to use the Blazor Alert component, including basic alerts, alerts with different colors, icons, styles, and layouts. It also shows how to apply custom CSS classes for further customization.

```razor
@* Basic *@
<Alert>This is a simple alert message.</Alert>

@* With color *@
<Alert Color="AlertColor.Success">Operation completed!</Alert>

@* With icon *@
<Alert Color="AlertColor.Warning">
    <Icon>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
    </Icon>
    <span>Warning: Check your input!</span>
</Alert>

@* Soft style *@
<Alert Style="AlertStyle.Soft" Color="AlertColor.Info">
    Important information here.
</Alert>

@* Outline error *@
<Alert Style="AlertStyle.Outline" Color="AlertColor.Error">
    Something went wrong!
</Alert>

@* Responsive layout via Class parameter *@
<Alert Color="AlertColor.Info" Class="alert-vertical sm:alert-horizontal">
    Vertical on mobile, horizontal on desktop.
</Alert>

@* With custom classes *@
<Alert Color="AlertColor.Success" Class="shadow-lg">
    Success with shadow!
</Alert>
```

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

### BlazyProgress Component Examples

Source: https://context7.com/ogix/blazyui/llms.txt

Showcases the BlazyProgress component for displaying task completion status in both determinate and indeterminate modes. Examples include various color options, dynamic updates, and a simulation of an upload process. This component has no external dependencies.

```razor
@* Determinate progress *@
<BlazyProgress Value="25" />
<BlazyProgress Value="50" Color="BlazyProgressColor.Primary" />
<BlazyProgress Value="75" Color="BlazyProgressColor.Success" />
<BlazyProgress Value="100" Color="BlazyProgressColor.Accent" />

@* Color variants *@
<BlazyProgress Value="60" Color="BlazyProgressColor.Info" />
<BlazyProgress Value="60" Color="BlazyProgressColor.Warning" />
<BlazyProgress Value="60" Color="BlazyProgressColor.Error" />

@* Indeterminate (animated) - no value *@
<BlazyProgress Color="BlazyProgressColor.Primary" />

@* Dynamic progress example *@
<BlazyProgress Value="@uploadProgress" Color="BlazyProgressColor.Success" />
<p>@uploadProgress% complete</p>
<BlazyButton OnClick="SimulateUpload" Disabled="@isUploading">
    @(isUploading ? "Uploading..." : "Start Upload")
</BlazyButton>

@code {
    private int uploadProgress = 0;
    private bool isUploading = false;

    private async Task SimulateUpload()
    {
        isUploading = true;
        uploadProgress = 0;

        while (uploadProgress < 100)
        {
            await Task.Delay(100);
            uploadProgress += 5;
            StateHasChanged();
        }

        isUploading = false;
    }
}
```

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

### BlazyBadge Component Examples

Source: https://context7.com/ogix/blazyui/llms.txt

Illustrates the BlazyBadge component's versatility in displaying labels, counts, and tags. It covers various color, size, and style variants, including its integration within a button for notification counts. No external dependencies are required.

```razor
@* Color variants *@
<BlazyBadge>Default</BlazyBadge>
<BlazyBadge Color="BlazyBadgeColor.Primary">Primary</BlazyBadge>
<BlazyBadge Color="BlazyBadgeColor.Secondary">Secondary</BlazyBadge>
<BlazyBadge Color="BlazyBadgeColor.Accent">Accent</BlazyBadge>
<BlazyBadge Color="BlazyBadgeColor.Info">Info</BlazyBadge>
<BlazyBadge Color="BlazyBadgeColor.Success">Success</BlazyBadge>
<BlazyBadge Color="BlazyBadgeColor.Warning">Warning</BlazyBadge>
<BlazyBadge Color="BlazyBadgeColor.Error">Error</BlazyBadge>

@* Size variants *@
<BlazyBadge Size="BlazyBadgeSize.ExtraSmall">XS</BlazyBadge>
<BlazyBadge Size="BlazyBadgeSize.Small">Small</BlazyBadge>
<BlazyBadge Size="BlazyBadgeSize.Medium">Medium</BlazyBadge>
<BlazyBadge Size="BlazyBadgeSize.Large">Large</BlazyBadge>

@* Style variants *@
<BlazyBadge Color="BlazyBadgeColor.Primary" Style="BlazyBadgeStyle.Outline">Outline</BlazyBadge>
<BlazyBadge Color="BlazyBadgeColor.Secondary" Style="BlazyBadgeStyle.Soft">Soft</BlazyBadge>
<BlazyBadge Color="BlazyBadgeColor.Accent" Style="BlazyBadgeStyle.Dash">Dash</BlazyBadge>
<BlazyBadge Color="BlazyBadgeColor.Info" Style="BlazyBadgeStyle.Ghost">Ghost</BlazyBadge>

@* In button with notification count *@
<BlazyButton Color="BlazyButtonColor.Primary">
    Inbox
    <BlazyBadge Color="BlazyBadgeColor.Error" Size="BlazyBadgeSize.Small">99+</BlazyBadge>
</BlazyButton>
```

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

### BlazyUI Button Example (Razor)

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-code-example-component-design.md

This Razor component demonstrates the usage of the Button component within the BlazyUI framework. It showcases various button color options and provides the corresponding Razor code for each button.

```razor
@page "/buttons"

<PageTitle>Buttons</PageTitle>

<h1 class="text-3xl font-bold mb-6">Button Component</h1>

<section class="mb-8">
    <h2 class="text-xl font-semibold mb-4">Basic</h2>
    <CodeExample Code="@basicCode">
        <div class="flex flex-wrap gap-2">
            <Button>Default</Button>
            <Button Color="ButtonColor.Neutral">Neutral</Button>
            <Button Color="ButtonColor.Primary">Primary</Button>
            <Button Color="ButtonColor.Secondary">Secondary</Button>
            <Button Color="ButtonColor.Accent">Accent</Button>
            <Button Color="ButtonColor.Info">Info</Button>
            <Button Color="ButtonColor.Success">Success</Button>
            <Button Color="ButtonColor.Warning">Warning</Button>
            <Button Color="ButtonColor.Error">Error</Button>
        </div>
    </CodeExample>
</section>

@code {
    private string basicCode = "<Button>Default</Button>\n<Button Color=\"ButtonColor.Neutral\">Neutral</Button>\n<Button Color=\"ButtonColor.Primary\">Primary</Button>\n<Button Color=\"ButtonColor.Secondary\">Secondary</Button>\n<Button Color=\"ButtonColor.Accent\">Accent</Button>\n<Button Color=\"ButtonColor.Info\">Info</Button>\n<Button Color=\"ButtonColor.Success\">Success</Button>\n<Button Color=\"ButtonColor.Warning\">Warning</Button>\n<Button Color=\"ButtonColor.Error\">Error</Button>";
}
```

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

### BlazyCard: Creating content containers in Razor

Source: https://context7.com/ogix/blazyui/llms.txt

Illustrates the usage of the BlazyCard component for structuring content. Examples cover basic cards, cards with images, horizontal layouts, different styles, and cards with image backgrounds.

```razor
@* Basic card *@
<BlazyCard>
    <BlazyCardBody>
        <BlazyCardTitle>Card Title</BlazyCardTitle>
        <p>This is the card content with some descriptive text.</p>
        <BlazyCardActions>
            <BlazyButton Color="BlazyButtonColor.Primary">Action</BlazyButton>
        </BlazyCardActions>
    </BlazyCardBody>
</BlazyCard>

@* Card with image *@
<BlazyCard>
    <BlazyCardFigure>
        <img src="https://picsum.photos/400/200" alt="Card image" />
    </BlazyCardFigure>
    <BlazyCardBody>
        <BlazyCardTitle>Photo Card</BlazyCardTitle>
        <p>A beautiful landscape photograph.</p>
        <BlazyCardActions Justify="BlazyCardActionsJustify.End">
            <BlazyButton Color="BlazyButtonColor.Primary">View</BlazyButton>
        </BlazyCardActions>
    </BlazyCardBody>
</BlazyCard>

@* Horizontal card with side image *@
<BlazyCard Side="true">
    <BlazyCardFigure>
        <img src="https://picsum.photos/200/200" alt="Side image" />
    </BlazyCardFigure>
    <BlazyCardBody>
        <BlazyCardTitle>Horizontal Layout</BlazyCardTitle>
        <p>Card with image on the side.</p>
    </BlazyCardBody>
</BlazyCard>

@* Style variants *@
<BlazyCard Style="BlazyCardStyle.Border" Size="BlazyCardSize.Small">
    <BlazyCardBody>
        <BlazyCardTitle>Bordered Card</BlazyCardTitle>
        <p>Small card with border style.</p>
    </BlazyCardBody>
</BlazyCard>

@* Full image background card *@
<BlazyCard ImageFull="true">
    <BlazyCardFigure>
        <img src="https://picsum.photos/400/300" alt="Background" />
    </BlazyCardFigure>
    <BlazyCardBody>
        <BlazyCardTitle>Overlay Card</BlazyCardTitle>
        <p class="text-white">Content overlaid on image background.</p>
    </BlazyCardBody>
</BlazyCard>
```

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

### Configure BlazyUI Modal Options

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-19-modal-design.md

Demonstrates how to configure advanced options for BlazyUI modals, such as setting backdrop click behavior and applying custom CSS classes. This example shows configuring a 'LargeFormModal' with specific parameters and options.

```csharp
var result = await ModalService.Show<LargeFormModal, FormData>(
    parameters: new Dictionary<string, object> { ["FormId"] = 456 },
    configure: options =>
    {
        options.CloseOnBackdropClick = true;
        options.CssClass = "max-w-3xl"; // wider modal
    });
```

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

### BlazyTooltip Examples - Blazor

Source: https://context7.com/ogix/blazyui/llms.txt

Demonstrates the usage of BlazyTooltip for displaying hover information. Supports customizable text, position (Top, Bottom, Left, Right), color variants (Primary, Error, Info), and rich HTML content. The tooltip can also be set to always be open.

```razor
@* Basic tooltip *@
<BlazyTooltip Text="This is helpful information">
    <BlazyButton>Hover me</BlazyButton>
</BlazyTooltip>

@* Position variants *@
<BlazyTooltip Text="Top tooltip" Position="BlazyTooltipPosition.Top">
    <BlazyButton>Top</BlazyButton>
</BlazyTooltip>

<BlazyTooltip Text="Bottom tooltip" Position="BlazyTooltipPosition.Bottom">
    <BlazyButton>Bottom</BlazyButton>
</BlazyTooltip>

<BlazyTooltip Text="Left tooltip" Position="BlazyTooltipPosition.Left">
    <BlazyButton>Left</BlazyButton>
</BlazyTooltip>

<BlazyTooltip Text="Right tooltip" Position="BlazyTooltipPosition.Right">
    <BlazyButton>Right</BlazyButton>
</BlazyTooltip>

@* Color variants *@
<BlazyTooltip Text="Primary tooltip" Color="BlazyTooltipColor.Primary">
    <BlazyButton Color="BlazyButtonColor.Primary">Primary</BlazyButton>
</BlazyTooltip>

<BlazyTooltip Text="Error information" Color="BlazyTooltipColor.Error">
    <BlazyBadge Color="BlazyBadgeColor.Error">!</BlazyBadge>
</BlazyTooltip>

@* Always open tooltip *@
<BlazyTooltip Text="Always visible" Open="true" Color="BlazyTooltipColor.Info">
    <span>Pinned tooltip</span>
</BlazyTooltip>

@* Rich content tooltip *@
<BlazyTooltip Position="BlazyTooltipPosition.Right">
    <TooltipContent>
        <div class="p-2">
            <strong>Rich Content</strong>
            <p>Supports HTML content</p>
        </div>
    </TooltipContent>
    <ChildContent>
        <BlazyButton Style="BlazyButtonStyle.Ghost">Rich Tooltip</BlazyButton>
    </ChildContent>
</BlazyTooltip>
```

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

### BlazyUI Layout Setup (Razor)

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-19-modal-design.md

This Razor code shows how to integrate the BlazyUI `ModalProvider` into the main application layout. Placing `<ModalProvider />` ensures that modal dialogs can be rendered throughout the application. This is typically added to the `MainLayout.razor` file.

```razor
@* MainLayout.razor *@
@inherits LayoutComponentBase

<ModalProvider />

<div class="drawer lg:drawer-open">
    @* existing layout content *@
</div>
```

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

### Triggering Simple Dialogs (C#)

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-19-modal-design.md

These C# examples demonstrate how to use the `IModalService` to display information, warning, and error dialogs. The `Info`, `Warning`, and `Error` methods can be called with a title and message. The `Error` method also supports custom button text via the `okText` parameter. These calls are asynchronous and return a Task.

```csharp
@inject IModalService ModalService

// Information
await ModalService.Info("Success", "Record saved successfully");

// Warning
await ModalService.Warning("Caution", "This operation may take a while");

// Error
await ModalService.Error("Failed", "Could not connect to server");

// Custom button text
await ModalService.Error("Delete Failed", "File is in use", okText: "Got it");
```

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

### BlazyUI NavBar Component Usage (Razor)

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-navbar-design.md

Demonstrates how to use the BlazyUI NavBar component in a Blazor application. It shows the structure for placing content in the start, center, and end sections, along with parameter usage for color, sticky, and shadow effects.

```razor
<NavBar Color="NavBarColor.Primary" Sticky Shadow>
    <NavBarStart>
        <a class="btn btn-ghost text-xl">BlazyUI</a>
    </NavBarStart>
    <NavBarCenter>
        <a class="btn btn-ghost">Home</a>
        <a class="btn btn-ghost">About</a>
    </NavBarCenter>
    <NavBarEnd>
        <Button>Login</Button>
    </NavBarEnd>
</NavBar>
```

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

### BlazyButton Component Examples

Source: https://context7.com/ogix/blazyui/llms.txt

This Razor code demonstrates various ways to use the BlazyButton component, including different color variants, sizes, styles, loading and disabled states, shape variants, and rendering as a link. It also shows basic event handling for the OnClick event.

```razor
@* Basic button variants *@
<BlazyButton Color="BlazyButtonColor.Primary">Primary</BlazyButton>
<BlazyButton Color="BlazyButtonColor.Secondary" Style="BlazyButtonStyle.Outline">Outline</BlazyButton>
<BlazyButton Color="BlazyButtonColor.Accent" Size="BlazyButtonSize.Large">Large</BlazyButton>
<BlazyButton Color="BlazyButtonColor.Error" Style="BlazyButtonStyle.Soft">Soft Error</BlazyButton>

@* Loading and disabled states *@
<BlazyButton Loading="true" Color="BlazyButtonColor.Primary">Saving...</BlazyButton>
<BlazyButton Disabled="true">Disabled</BlazyButton>

@* Shape variants *@
<BlazyButton Circle="true" Color="BlazyButtonColor.Primary">+</BlazyButton>
<BlazyButton Square="true" Color="BlazyButtonColor.Secondary">X</BlazyButton>
<BlazyButton Wide="true" Block="true">Full Width Button</BlazyButton>

@* Link button (renders as anchor) *@
<BlazyButton Href="https://example.com" Target="_blank" Color="BlazyButtonColor.Info">
    External Link
</BlazyButton>

@* Event handling *@
<BlazyButton Color="BlazyButtonColor.Success" OnClick="HandleClick">
    Click Me
</BlazyButton>

@code {
    private async Task HandleClick(MouseEventArgs args)
    {
        // Handle button click
        Console.WriteLine($"Button clicked at: {args.ClientX}, {args.ClientY}");
    }
}
```

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

### Configure Tailwind CSS and DaisyUI

Source: https://github.com/ogix/blazyui/blob/main/README.md

Installs Tailwind CSS and DaisyUI npm packages and configures the main CSS file to import them. This setup is crucial for BlazyUI's styling and theming capabilities.

```bash
npm install -D tailwindcss@^4 daisyui@^5
```

```css
@import "tailwindcss";
@plugin "daisyui";

/* Optional: Configure themes */
@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
}

/* Scan your project and BlazyUI components */
@source "../Components/**/*.razor";
@source "../bin/blazyui/Components";
```

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

### Integrate Tailwind CSS Build with MSBuild

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-tailwind-daisyui-setup-design.md

MSBuild targets to manage the npm installation and execute the Tailwind CSS build command during the release configuration or when the output CSS file is missing. Ensures CSS is built before the main project.

```xml
<Target Name="CheckNpmInstall" BeforeTargets="BuildTailwind">
  <Exec Command="npm install" WorkingDirectory="$(MSBuildProjectDirectory)"
        Condition="!Exists('node_modules')" />
</Target>

<Target Name="BuildTailwind" BeforeTargets="Build"
        Condition="'$(Configuration)' == 'Release' OR !Exists('wwwroot/css/app.min.css')">
  <Exec Command="npm run build:css" WorkingDirectory="$(MSBuildProjectDirectory)" />
</Target>
```

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

### Build BlazyUI Solution

Source: https://github.com/ogix/blazyui/blob/main/README.md

Contains the .NET CLI command to build the entire BlazyUI solution. This command compiles all projects within the solution, including the component library and the demo application.

```bash
# Build the solution
dotnet build
```

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

### CodeExample Component Usage (Razor)

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-code-example-component-design.md

Demonstrates how to use the CodeExample component in a Razor page. It takes the source code as a string and wraps the rendered component within its content. The `Code` parameter holds the Razor/HTML markup, and `Title` provides an optional heading.

```razor
<CodeExample Code="@primaryButtonCode" Title="Primary Button">
    <Button Color="ButtonColor.Primary">Primary</Button>
</CodeExample>

@code {
    private string primaryButtonCode = "<Button Color=\"ButtonColor.Primary\">Primary</Button>";
}
```

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

### Highlight.js CDN Integration (HTML)

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-code-example-component-design.md

Shows how to include the Highlight.js library and its necessary language modules via CDN in an HTML file. This is a simple way to enable syntax highlighting without a build process. Ensure the CSS theme and language scripts are correctly linked.

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/csharp.min.js"></script>
```

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

### Build and Run BlazyUI Project Commands (Bash)

Source: https://github.com/ogix/blazyui/blob/main/CLAUDE.md

Provides essential bash commands for building the BlazyUI solution, running the demo application, and managing CSS development with hot reload. It requires two terminals for CSS watch and Blazor app execution.

```bash
# Build the entire solution
dotnet build

# Run the demo app (from src/BlazyUI.Demo)
cd src/BlazyUI.Demo
dotnet run

# CSS development (requires two terminals)
# Terminal 1: Watch CSS changes
cd src/BlazyUI.Demo && npm run watch:css

# Terminal 2: Run Blazor app with hot reload
dotnet watch --project src/BlazyUI.Demo
```

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

### BlazyUI CodeExample Component (Razor)

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-code-example-component-design.md

The CodeExample component in BlazyUI allows for displaying code snippets alongside their rendered output. It supports toggling code visibility, copying code to the clipboard, and integrates with JavaScript for syntax highlighting. It requires the IJSRuntime service for JavaScript interop.

```razor
@inject IJSRuntime JSRuntime

<div class="code-example border border-base-300 rounded-lg overflow-hidden mb-4">
    @if (!string.IsNullOrEmpty(Title))
    {
        <div class="px-4 py-2 bg-base-200 border-b border-base-300 font-medium">
            @Title
        </div>
    }

    <div class="p-4 bg-base-100">
        @ChildContent
    </div>

    <div class="flex justify-end gap-2 px-4 py-2 bg-base-200 border-t border-base-300">
        <button class="btn btn-sm btn-ghost" @onclick="ToggleCode">
            @(showCode ? "Hide Code" : "Show Code")
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
            </svg>
        </button>
        @if (showCode)
        {
            <button class="btn btn-sm btn-ghost" @onclick="CopyCode">
                @(copied ? "Copied!" : "Copy")
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
            </button>
        }
    </div>

    @if (showCode)
    {
        <div class="border-t border-base-300">
            <pre class="m-0 p-4 overflow-x-auto"><code id="@codeId" class="language-@Language">@Code</code></pre>
        </div>
    }
</div>

@code {
    [Parameter] public RenderFragment ChildContent { get; set; } = default!;
    [Parameter] public string Code { get; set; } = "";
    [Parameter] public string Language { get; set; } = "html";
    [Parameter] public string? Title { get; set; }
    [Parameter] public bool DefaultExpanded { get; set; } = false;

    private bool showCode;
    private bool copied;
    private string codeId = $"code-{Guid.NewGuid():N}";

    protected override void OnInitialized()
    {
        showCode = DefaultExpanded;
    }

    private async Task ToggleCode()
    {
        showCode = !showCode;
        if (showCode)
        {
            await Task.Delay(1); // Wait for DOM update
            await JSRuntime.InvokeVoidAsync("codeHighlight.highlight", codeId);
        }
    }

    private async Task CopyCode()
    {
        var success = await JSRuntime.InvokeAsync<bool>("codeHighlight.copyToClipboard", Code);
        if (success)
        {
            copied = true;
            StateHasChanged();
            await Task.Delay(2000);
            copied = false;
            StateHasChanged();
        }
    }
}
```

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

### Configure npm Dependencies and Scripts

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-tailwind-daisyui-setup-design.md

Defines development dependencies for Tailwind CSS and DaisyUI, along with scripts for building and watching CSS files. This configuration is essential for the CSS build process.

```json
{
  "devDependencies": {
    "tailwindcss": "^4",
    "daisyui": "^5"
  },
  "scripts": {
    "build:css": "npx @tailwindcss/cli -i ./wwwroot/css/app.css -o ./wwwroot/css/app.min.css --minify",
    "watch:css": "npx @tailwindcss/cli -i ./wwwroot/css/app.css -o ./wwwroot/css/app.min.css --watch"
  }
}
```

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

### TextInput Component Styled Usage - Razor

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-textinput-design.md

Illustrates how to apply custom styling to the BlazyUI TextInput component using the `Color` and `Size` parameters. Examples show a large primary colored input and a small ghost input.

```razor
@* Styled *@
<TextInput @bind-Value="search" Color="TextInputColor.Primary" Size="TextInputSize.Large" />
<TextInput @bind-Value="code" Ghost Size="TextInputSize.Small" />
```

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

### Clone BlazyUI Repository

Source: https://github.com/ogix/blazyui/blob/main/README.md

Provides the bash command to clone the BlazyUI project from its GitHub repository. This is the first step in setting up the project locally for development or contribution.

```bash
# Clone the repository
git clone https://github.com/your-username/BlazyUI.git
cd BlazyUI
```

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

### Clean and Rebuild Solution with dotnet in Bash

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-phase1-foundation.md

Performs a clean operation followed by a build of the entire solution using .NET CLI commands. This ensures that all intermediate build files are removed and the project is rebuilt from scratch, verifying its overall integrity.

```bash
dotnet clean && dotnet build
```

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

### Import Tailwind CSS and DaisyUI Plugins

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-tailwind-daisyui-setup-design.md

This CSS file imports Tailwind CSS and the DaisyUI plugin, and specifies source files for component styles. It's the main input for the CSS build process.

```css
@import "tailwindcss";
@plugin "daisyui";

@source "../../BlazyUI/**/*.razor";
@source "../Components/**/*.razor";
```

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

### Run BlazyUI with Hot Reload

Source: https://github.com/ogix/blazyui/blob/main/README.md

Instructs on how to run the BlazyUI demo application with the .NET watch tool, enabling Blazor hot reload. This command should be executed in a separate terminal from the CSS watch process for optimal development workflow.

```bash
# Terminal 2: Run with hot reload
dotnet watch --project src/BlazyUI.Demo
```

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

### Verify Folder Structure with find and grep in Bash

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-phase1-foundation.md

Lists all C# and Razor files within the `src/BlazyUI` directory, excluding files in `obj` folders, and sorts the output. This command is used to verify that the project's file structure is as expected after the recent changes.

```bash
find src/BlazyUI -type f \( -name "*.cs" -o -name "*.razor" \) | grep -v obj | sort
```

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

### BlazyCheckbox and BlazyToggle Usage

Source: https://context7.com/ogix/blazyui/llms.txt

Demonstrates the usage of BlazyCheckbox and BlazyToggle components for creating boolean input fields. Supports various color and size variants, and integrates with BlazyUI's EditForm for validation. Includes examples with labels and within a form context.

```razor
@* Checkbox variants *@
<BlazyCheckbox @bind-Value="isChecked" />
<BlazyCheckbox @bind-Value="isPrimary" Color="BlazyCheckboxColor.Primary" />
<BlazyCheckbox @bind-Value="isSuccess" Color="BlazyCheckboxColor.Success" Size="BlazyCheckboxSize.Large" />

@* Toggle variants *@
<BlazyToggle @bind-Value="isEnabled" />
<BlazyToggle @bind-Value="isPrimaryToggle" Color="BlazyToggleColor.Primary" />
<BlazyToggle @bind-Value="isAccentToggle" Color="BlazyToggleColor.Accent" Size="BlazyToggleSize.Large" />

@* With labels in form *@
<EditForm Model="settings" OnValidSubmit="SaveSettings">
    <BlazyFieldset Legend="Notification Settings">
        <BlazyLabel Text="Email notifications" Variant="BlazyLabelVariant.Floating">
            <BlazyCheckbox @bind-Value="settings.EmailNotifications" Color="BlazyCheckboxColor.Primary" />
        </BlazyLabel>

        <BlazyLabel Text="Push notifications" Variant="BlazyLabelVariant.Floating">
            <BlazyToggle @bind-Value="settings.PushNotifications" Color="BlazyToggleColor.Success" />
        </BlazyLabel>

        <BlazyLabel Text="Dark mode" Variant="BlazyLabelVariant.Floating">
            <BlazyToggle @bind-Value="settings.DarkMode" Color="BlazyToggleColor.Secondary" />
        </BlazyLabel>
    </BlazyFieldset>

    <BlazyButton type="submit" Color="BlazyButtonColor.Primary">Save Settings</BlazyButton>
</EditForm>

@code {
    private bool isChecked = false;
    private bool isPrimary = true;
    private bool isSuccess = false;
    private bool isEnabled = true;
    private bool isPrimaryToggle = false;
    private bool isAccentToggle = true;
    private SettingsModel settings = new();

    private async Task SaveSettings() { }

    public class SettingsModel
    {
        public bool EmailNotifications { get; set; } = true;
        public bool PushNotifications { get; set; } = false;
        public bool DarkMode { get; set; } = false;
    }
}
```

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

### Creating a Navigation Bar with BlazyNavBar

Source: https://context7.com/ogix/blazyui/llms.txt

Illustrates the structure of the BlazyNavBar component, which allows for defining content in start, center, and end sections. It supports features like sticky positioning and color variants, and can contain other BlazyUI components like menus and buttons.

```razor
<BlazyNavBar Sticky="true" Shadow="true" Color="BlazyNavBarColor.Primary">
    <BlazyNavBarStart>
        <a class="btn btn-ghost text-xl">MyApp</a>
    </BlazyNavBarStart>

    <BlazyNavBarCenter>
        <BlazyMenu Direction="BlazyMenuDirection.Horizontal">
            <BlazyMenuItem>
                <a href="/">Home</a>
            </BlazyMenuItem>
            <BlazyMenuItem>
                <a href="/products">Products</a>
            </BlazyMenuItem>
            <BlazyMenuDropdown>
                <summary>Services</summary>
                <BlazyMenu>
                    <BlazyMenuItem><a href="/consulting">Consulting</a></BlazyMenuItem>
                    <BlazyMenuItem><a href="/support">Support</a></BlazyMenuItem>
                </BlazyMenu>
            </BlazyMenuDropdown>
        </BlazyMenu>
    </BlazyNavBarCenter>

    <BlazyNavBarEnd>
        <BlazyButton Style="BlazyButtonStyle.Ghost">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
        </BlazyButton>
        <BlazyButton Color="BlazyButtonColor.Primary">Sign In</BlazyButton>
    </BlazyNavBarEnd>
</BlazyNavBar>
```

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

### Build Project with dotnet build in Bash

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-phase1-foundation.md

Executes the .NET build command to compile the project. This command verifies the project's integrity and checks for any compilation errors. It is used after code changes to ensure the project builds successfully.

```bash
dotnet build
```

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

### BlazyAccordion Examples - Blazor

Source: https://context7.com/ogix/blazyui/llms.txt

Illustrates the BlazyAccordion component for creating collapsible content sections. Supports basic accordion functionality and an exclusive mode using the GroupName parameter, ensuring only one item is open at a time. Custom indicators like arrows can also be applied.

```razor
@* Basic accordion *@
<BlazyAccordion>
    <BlazyAccordionItem>
        <BlazyAccordionTitle>Section 1</BlazyAccordionTitle>
        <BlazyAccordionContent>
            <p>Content for section 1. This can contain any HTML or Blazor components.</p>
        </BlazyAccordionContent>
    </BlazyAccordionItem>
    <BlazyAccordionItem>
        <BlazyAccordionTitle>Section 2</BlazyAccordionTitle>
        <BlazyAccordionContent>
            <p>Content for section 2.</p>
        </BlazyAccordionContent>
    </BlazyAccordionItem>
    <BlazyAccordionItem>
        <BlazyAccordionTitle>Section 3</BlazyAccordionTitle>
        <BlazyAccordionContent>
            <p>Content for section 3.</p>
        </BlazyAccordionContent>
    </BlazyAccordionItem>
</BlazyAccordion>

@* Exclusive accordion (only one open at a time) *@
<BlazyAccordion GroupName="faq">
    <BlazyAccordionItem Indicator="BlazyAccordionIndicator.Arrow">
        <BlazyAccordionTitle>What is BlazyUI?</BlazyAccordionTitle>
        <BlazyAccordionContent>
            <p>BlazyUI is a Blazor component library wrapping DaisyUI v5 with Tailwind CSS v4.</p>
        </BlazyAccordionContent>
    </BlazyAccordionItem>
    <BlazyAccordionItem Indicator="BlazyAccordionIndicator.Arrow">
        <BlazyAccordionTitle>How do I install it?</BlazyAccordionTitle>
        <BlazyAccordionContent>
            <p>Install via NuGet: <code>dotnet add package BlazyUI</code></p>
        </BlazyAccordionContent>
    </BlazyAccordionItem>
    <BlazyAccordionItem Indicator="BlazyAccordionIndicator.Arrow">
        <BlazyAccordionTitle>Is it free to use?</BlazyAccordionTitle>
        <BlazyAccordionContent>
            <p>Yes, BlazyUI is open source and free to use under the MIT license.</p>
        </BlazyAccordionContent>
    </BlazyAccordionItem>
</BlazyAccordion>
```

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

### JavaScript Interop for Code Highlighting and Copying

Source: https://github.com/ogix/blazyui/blob/main/docs/plans/2026-01-17-code-example-component-design.md

Provides JavaScript functions for integrating with the Highlight.js library and the browser's Clipboard API. The `highlight` function applies syntax highlighting to a specified HTML element, while `copyToClipboard` handles copying text to the user's clipboard.

```javascript
// wwwroot/js/code-highlight.js
window.codeHighlight = {
    highlight: function(elementId) {
        const element = document.getElementById(elementId);
        if (element) {
            hljs.highlightElement(element);
        }
    },
    copyToClipboard: async function(text) {
        try {
            await navigator.clipboard.writeText(text);
            return true;
        } catch (err) {
            console.error('Failed to copy:', err);
            return false;
        }
    }
};
```