WireFrame.UI 3.1.3

There is a newer version of this package available.
See the version list below for details.

dotnet add package WireFrame.UI --version 3.1.3

NuGet\Install-Package WireFrame.UI -Version 3.1.3

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="WireFrame.UI" Version="3.1.3" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="WireFrame.UI" Version="3.1.3" />
                    

                            Directory.Packages.props

<PackageReference Include="WireFrame.UI" />
                    

                            Project file

For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.

paket add WireFrame.UI --version 3.1.3

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: WireFrame.UI, 3.1.3"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

#:package WireFrame.UI@3.1.3

#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

#addin nuget:?package=WireFrame.UI&version=3.1.3
                    

                            Install as a Cake Addin

#tool nuget:?package=WireFrame.UI&version=3.1.3
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Wireframe UI Blazor Component Library

Comprehensive Documentation & Usage Guide

A complete, production-ready Blazor component library implementing flat minimalist design with a diagrammatic aesthetic for .NET 9 WASM projects.

Overview
Installation
Core Concepts
Layout Components
Button Components
Form Components
Display Components
Navigation Components
Overlay Components
Progress & Loading Components
Utility Components
Best Practices
Theming & Customization

Overview

What is Wireframe UI?

Wireframe UI is a comprehensive Blazor component library that provides 38+ production-ready components following a flat, minimalist design philosophy. The framework emphasizes:

Flat Design: No shadows, gradients, or 3D effects
Stroke-Based Graphics: Clean borders and outlines (2px standard)
Monochromatic Dark Theme: Primary background #1a1a1a with selective color accents
Technical Aesthetic: Engineering diagram-inspired visual style
Zero JavaScript Dependencies: Pure CSS-driven (except Toast auto-hide timer)
Mobile-First: Touch-friendly (44px minimum tap targets) and responsive
Strongly Typed: Full enum support for variants, sizes, and states

Key Features

✅ Zero JavaScript - Pure CSS-driven components
✅ Strongly Typed - Enums for all variants, sizes, states
✅ Two-way Binding - Full @bind support
✅ Event Callbacks - OnClick, OnChange, OnDismiss, etc.
✅ Mobile-First - Touch-friendly and responsive
✅ Customizable - Rich parameter support
✅ Additional Attributes - Pass-through HTML attributes
✅ No Dependencies - Pure C# and CSS

Design System

Color Palette:

Background: #1a1a1a (primary), #242424 (secondary), #2a2a2a (tertiary)
Text: #e0e0e0 (primary), #a0a0a0 (secondary), #808080 (tertiary)
Accents: Blue #4a9eff, Green #4ade80, Orange #fb923c, Red #f87171, Purple #a78bfa, Yellow #fbbf24

Installation

Step 1: Copy Component Files

Copy all .razor files to your Blazor WASM project (e.g., /Components/WireframeUI/).

Step 2: Add CSS References

Add the following to your wwwroot/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    
    <link href="css/wireframe/base.css" rel="stylesheet" />
    <link href="css/wireframe/base_mobile.css" rel="stylesheet" />
    
    
    <link href="css/wireframe/buttons.css" rel="stylesheet" />
    <link href="css/wireframe/buttons_mobile.css" rel="stylesheet" />
    <link href="css/wireframe/cards.css" rel="stylesheet" />
    <link href="css/wireframe/cards_mobile.css" rel="stylesheet" />
    <link href="css/wireframe/forms.css" rel="stylesheet" />
    <link href="css/wireframe/forms_mobile.css" rel="stylesheet" />
    <link href="css/wireframe/navigation.css" rel="stylesheet" />
    <link href="css/wireframe/navigation_mobile.css" rel="stylesheet" />
    <link href="css/wireframe/modals.css" rel="stylesheet" />
    <link href="css/wireframe/modals_mobile.css" rel="stylesheet" />
    <link href="css/wireframe/tables.css" rel="stylesheet" />
    <link href="css/wireframe/tables_mobile.css" rel="stylesheet" />
    <link href="css/wireframe/alerts.css" rel="stylesheet" />
    <link href="css/wireframe/alerts_mobile.css" rel="stylesheet" />
    <link href="css/wireframe/badges.css" rel="stylesheet" />
    <link href="css/wireframe/badges_mobile.css" rel="stylesheet" />
    <link href="css/wireframe/dropdowns.css" rel="stylesheet" />
    <link href="css/wireframe/dropdowns_mobile.css" rel="stylesheet" />
    <link href="css/wireframe/progress.css" rel="stylesheet" />
    <link href="css/wireframe/progress_mobile.css" rel="stylesheet" />
    <link href="css/wireframe/accordions.css" rel="stylesheet" />
    <link href="css/wireframe/accordions_mobile.css" rel="stylesheet" />
    <link href="css/wireframe/thumbnails.css" rel="stylesheet" />
    <link href="css/wireframe/thumbnails_mobile.css" rel="stylesheet" />
    <link href="css/wireframe/pager.css" rel="stylesheet" />
    <link href="css/wireframe/pager_mobile.css" rel="stylesheet" />
</head>
<body>
    <div id="app"></div>
</body>
</html>

Step 3: Update _Imports.razor

Add to your project's _Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using YourProjectName
@using YourProjectName.Components.WireframeUI

Quick Start Example

@page "/example"

<WfContainer>
    <WfCard Title="Welcome" Accent="true">
        <p>Get started with Wireframe UI components!</p>
    </WfCard>
    
    <WfButton Variant="WfButton.ButtonVariant.Primary" Filled="true">
        Click Me
    </WfButton>
</WfContainer>

Core Concepts

Two-Way Binding

Components support Blazor's two-way binding pattern:

<WfInput @bind-Value="email" />
<WfCheckbox @bind-Checked="agreed" />
<WfSelect @bind-Value="country" />

Event Callbacks

Most interactive components support event callbacks:

<WfButton OnClick="HandleClick">Click Me</WfButton>
<WfInput ValueChanged="HandleValueChange" />
<WfModal OnDismiss="HandleModalClose" />

Additional Attributes

All components support AdditionalAttributes parameter for passing custom HTML attributes:

<WfButton id="submit-btn" data-test="submit">Submit</WfButton>
<WfCard class="my-custom-class" style="margin-top: 2rem;">Content</WfCard>

Strongly Typed Enums

Components use enums for type safety:

<WfButton Variant="WfButton.ButtonVariant.Primary" 
          Size="WfButton.ButtonSize.Large" />
          
<WfAlert Variant="WfAlert.AlertVariant.Success" />

<WfProgress Variant="WfProgress.ProgressVariant.Warning" />

Layout Components

WfContainer

Purpose: Responsive container with optional fluid layout for wrapping page content.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Content to render inside the container
`Fluid`	`bool`	false	If true, container spans full width
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfContainer>
    <p>Fixed width content</p>
</WfContainer>


<WfContainer Fluid="true">
    <p>Full width content</p>
</WfContainer>

WfRow

Purpose: Grid row container with configurable gap spacing between columns.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Column components to render
`Gap`	`GapSize`	None	Spacing between columns
`NoGutters`	`bool`	false	Remove gutters between columns
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Gap Sizes (Enum):

None - No gap
Small - Small spacing
Medium - Medium spacing
Large - Large spacing
ExtraLarge - Extra large spacing

Usage:

<WfRow Gap="WfRow.GapSize.Medium">
    <WfColumn Span="6">Column 1</WfColumn>
    <WfColumn Span="6">Column 2</WfColumn>
</WfRow>

<WfRow NoGutters="true">
    <WfColumn Span="4">No gutter 1</WfColumn>
    <WfColumn Span="4">No gutter 2</WfColumn>
    <WfColumn Span="4">No gutter 3</WfColumn>
</WfRow>

WfColumn

Purpose: Responsive grid column with 12-column grid system support.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Content to render inside column
`Span`	`int?`	null	Column span (1-12)
`Xs`	`int?`	null	Extra small breakpoint span
`Sm`	`int?`	null	Small breakpoint span
`Md`	`int?`	null	Medium breakpoint span
`Lg`	`int?`	null	Large breakpoint span
`Xl`	`int?`	null	Extra large breakpoint span
`MobileSpan`	`int?`	null	Mobile-specific span
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfRow>
    <WfColumn Span="4">One third</WfColumn>
    <WfColumn Span="4">One third</WfColumn>
    <WfColumn Span="4">One third</WfColumn>
</WfRow>


<WfRow>
    <WfColumn Xs="12" Md="6" Lg="4">
        Responsive column
    </WfColumn>
    <WfColumn Xs="12" Md="6" Lg="8">
        Responsive column
    </WfColumn>
</WfRow>


<WfRow>
    <WfColumn Span="6" MobileSpan="12">
        Full width on mobile, half on desktop
    </WfColumn>
</WfRow>

Button Components

WfButton

Purpose: Versatile button component with variants, sizes, states, and icon support.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Button text/content
`Icon`	`string?`	null	Icon character/text
`IconPosition`	`IconPlacement`	Left	Icon position (Left/Right)
`Variant`	`ButtonVariant`	Default	Button color variant
`Size`	`ButtonSize`	Medium	Button size
`Filled`	`bool`	false	Solid background style
`Ghost`	`bool`	false	Ghost/transparent style
`Loading`	`bool`	false	Show loading state
`Disabled`	`bool`	false	Disable button
`FullWidthMobile`	`bool`	false	Full width on mobile
`IconOnly`	`bool`	false	Icon-only button (square)
`Type`	`string`	"button"	HTML button type
`OnClick`	`EventCallback<MouseEventArgs>`	-	Click event handler
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Button Variants (Enum):

Default - Default gray style
Primary - Blue accent
Success - Green accent
Warning - Orange accent
Error - Red accent
Secondary - Secondary gray
Ghost - Transparent

Button Sizes (Enum):

Small - Small button
Medium - Default size
Large - Large button
ExtraLarge - Extra large button

Icon Placement (Enum):

Left - Icon before text
Right - Icon after text

Usage:


<WfButton>Default</WfButton>
<WfButton Variant="WfButton.ButtonVariant.Primary">Primary</WfButton>
<WfButton Variant="WfButton.ButtonVariant.Success">Success</WfButton>


<WfButton Variant="WfButton.ButtonVariant.Primary" Filled="true">
    Primary Filled
</WfButton>


<WfButton Size="WfButton.ButtonSize.Small">Small</WfButton>
<WfButton Size="WfButton.ButtonSize.Large">Large</WfButton>


<WfButton Icon="→" IconPosition="WfButton.IconPlacement.Left">
    Next
</WfButton>

<WfButton IconOnly="true">✓</WfButton>


<WfButton Loading="true">Loading...</WfButton>
<WfButton Disabled="true">Disabled</WfButton>


<WfButton Variant="WfButton.ButtonVariant.Primary" 
          OnClick="HandleClick">
    Click Me
</WfButton>

@code {
    private void HandleClick(MouseEventArgs e)
    {
        // Handle click
    }
}

WfButtonGroup

Purpose: Groups buttons together horizontally or vertically.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Button components to group
`Vertical`	`bool`	false	Stack buttons vertically
`Size`	`ButtonGroupSize`	Medium	Size of button group
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Button Group Sizes (Enum):

Small - Small button group
Medium - Default size
Large - Large button group

Usage:


<WfButtonGroup>
    <WfButton>Left</WfButton>
    <WfButton Variant="WfButton.ButtonVariant.Primary">Center</WfButton>
    <WfButton>Right</WfButton>
</WfButtonGroup>


<WfButtonGroup Vertical="true">
    <WfButton>Top</WfButton>
    <WfButton>Middle</WfButton>
    <WfButton>Bottom</WfButton>
</WfButtonGroup>


<WfButtonGroup Size="WfButtonGroup.ButtonGroupSize.Large">
    <WfButton>Option 1</WfButton>
    <WfButton>Option 2</WfButton>
</WfButtonGroup>

Form Components

WfInput

Purpose: Text input field with label, validation states, help text, and error messages.

Parameters:

Parameter	Type	Default	Description
`Value`	`string?`	null	Input value (supports @bind-Value)
`ValueChanged`	`EventCallback<string>`	-	Value change event
`Label`	`string?`	null	Input label
`Placeholder`	`string?`	null	Placeholder text
`HelpText`	`string?`	null	Help text below input
`ErrorMessage`	`string?`	null	Error message to display
`Type`	`string`	"text"	HTML input type
`Required`	`bool`	false	Show required indicator
`Disabled`	`bool`	false	Disable input
`ReadOnly`	`bool`	false	Make input read-only
`Size`	`InputSize`	Medium	Input size
`State`	`ValidationState`	None	Validation state
`ContainerClass`	`string`	""	Additional container CSS classes
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Input Sizes (Enum):

Small - Small input
Medium - Default size
Large - Large input

Validation States (Enum):

None - No validation styling
Valid - Success/valid state (green)
Invalid - Error/invalid state (red)

Usage:


<WfInput Label="Email" 
         Type="email" 
         @bind-Value="email"
         Placeholder="you@example.com" />


<WfInput Label="Username" 
         @bind-Value="username"
         HelpText="Choose a unique username" />


<WfInput Label="Password" 
         Type="password" 
         @bind-Value="password"
         Required="true" />


<WfInput Label="Email" 
         @bind-Value="email"
         State="@(isValid ? WfInput.ValidationState.Valid : WfInput.ValidationState.Invalid)"
         ErrorMessage="@errorMessage" />


<WfInput Size="WfInput.InputSize.Small" @bind-Value="value1" />
<WfInput Size="WfInput.InputSize.Large" @bind-Value="value2" />


<WfInput Disabled="true" Value="Disabled input" />
<WfInput ReadOnly="true" Value="Read-only input" />

@code {
    private string email = "";
    private string username = "";
    private string password = "";
    private bool isValid = false;
    private string errorMessage = "Invalid email format";
}

WfTextarea

Purpose: Multi-line text input with configurable rows.

Parameters:

Parameter	Type	Default	Description
`Value`	`string?`	null	Textarea value (supports @bind-Value)
`ValueChanged`	`EventCallback<string>`	-	Value change event
`Label`	`string?`	null	Textarea label
`Placeholder`	`string?`	null	Placeholder text
`HelpText`	`string?`	null	Help text below textarea
`ErrorMessage`	`string?`	null	Error message to display
`Rows`	`int`	4	Number of visible rows
`Required`	`bool`	false	Show required indicator
`Disabled`	`bool`	false	Disable textarea
`ReadOnly`	`bool`	false	Make textarea read-only
`State`	`ValidationState`	None	Validation state
`ContainerClass`	`string`	""	Additional container CSS classes
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Validation States (Enum):

None - No validation styling
Valid - Success/valid state
Invalid - Error/invalid state

Usage:


<WfTextarea Label="Message" 
            @bind-Value="message"
            Rows="6"
            Placeholder="Enter your message..." />


<WfTextarea Label="Description" 
            @bind-Value="description"
            State="WfTextarea.ValidationState.Valid"
            HelpText="Provide a detailed description" />


<WfTextarea Rows="3" @bind-Value="shortText" />
<WfTextarea Rows="10" @bind-Value="longText" />

@code {
    private string message = "";
    private string description = "";
}

WfSelect

Purpose: Generic dropdown select component with validation support.

Type Parameter: TValue - The type of the selected value

Parameters:

Parameter	Type	Default	Description
`Value`	`TValue?`	null	Selected value (supports @bind-Value)
`ValueChanged`	`EventCallback<TValue>`	-	Value change event
`ChildContent`	`RenderFragment?`	null	Option elements
`Label`	`string?`	null	Select label
`Placeholder`	`string?`	null	Placeholder option text
`HelpText`	`string?`	null	Help text below select
`ErrorMessage`	`string?`	null	Error message to display
`Required`	`bool`	false	Show required indicator
`Disabled`	`bool`	false	Disable select
`Size`	`SelectSize`	Medium	Select size
`State`	`ValidationState`	None	Validation state
`ContainerClass`	`string`	""	Additional container CSS classes
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Select Sizes (Enum):

Small - Small select
Medium - Default size
Large - Large select

Validation States (Enum):

None - No validation styling
Valid - Success/valid state
Invalid - Error/invalid state

Usage:


<WfSelect Label="Country" @bind-Value="country">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
</WfSelect>


<WfSelect Label="Size" 
          @bind-Value="size"
          Placeholder="Choose size">
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
</WfSelect>


<WfSelect Label="Category" 
          @bind-Value="category"
          State="WfSelect<string>.ValidationState.Invalid"
          ErrorMessage="Please select a category"
          Required="true">
    <option value="">Select category</option>
    <option value="tech">Technology</option>
    <option value="business">Business</option>
</WfSelect>


<WfSelect Label="Quantity" @bind-Value="quantity">
    <option value="">Select quantity</option>
    <option value="1">1</option>
    <option value="5">5</option>
    <option value="10">10</option>
</WfSelect>

@code {
    private string country = "";
    private string size = "";
    private string category = "";
    private int quantity = 0;
}

WfCheckbox

Purpose: Checkbox input with label support.

Parameters:

Parameter	Type	Default	Description
`Checked`	`bool`	false	Checkbox state (supports @bind-Checked)
`CheckedChanged`	`EventCallback<bool>`	-	Checked state change event
`Label`	`string?`	null	Checkbox label text
`ChildContent`	`RenderFragment?`	null	Custom label content
`Disabled`	`bool`	false	Disable checkbox
`ContainerClass`	`string`	""	Additional container CSS classes
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfCheckbox Label="I agree to terms" @bind-Checked="agreed" />


<WfCheckbox @bind-Checked="subscribe">
    <strong>Subscribe</strong> to our newsletter
</WfCheckbox>


<WfCheckbox Label="Disabled option" Disabled="true" />


<WfCheckbox Label="Option 1" @bind-Checked="option1" />
<WfCheckbox Label="Option 2" @bind-Checked="option2" />
<WfCheckbox Label="Option 3" @bind-Checked="option3" />

@code {
    private bool agreed = false;
    private bool subscribe = true;
    private bool option1 = false;
    private bool option2 = false;
    private bool option3 = false;
}

WfRadio

Purpose: Radio button input for mutually exclusive selections.

Parameters:

Parameter	Type	Default	Description
`Value`	`string?`	null	This radio's value
`SelectedValue`	`string?`	null	Currently selected value (supports @bind-SelectedValue)
`SelectedValueChanged`	`EventCallback<string>`	-	Selection change event
`Name`	`string?`	null	Radio group name
`Label`	`string?`	null	Radio label text
`ChildContent`	`RenderFragment?`	null	Custom label content
`Disabled`	`bool`	false	Disable radio
`ContainerClass`	`string`	""	Additional container CSS classes
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfRadio Name="plan" 
         Value="free" 
         @bind-SelectedValue="selectedPlan" 
         Label="Free Plan ($0/mo)" />
         
<WfRadio Name="plan" 
         Value="pro" 
         @bind-SelectedValue="selectedPlan" 
         Label="Pro Plan ($29/mo)" />
         
<WfRadio Name="plan" 
         Value="enterprise" 
         @bind-SelectedValue="selectedPlan" 
         Label="Enterprise Plan ($99/mo)" />


<WfRadio Name="size" 
         Value="large" 
         @bind-SelectedValue="selectedSize">
    <strong>Large</strong> (recommended)
</WfRadio>


<WfRadio Name="plan" 
         Value="custom" 
         Label="Custom Plan" 
         Disabled="true" />

@code {
    private string selectedPlan = "free";
    private string selectedSize = "medium";
}

WfSwitch

Purpose: Toggle switch for on/off states.

Parameters:

Parameter	Type	Default	Description
`Checked`	`bool`	false	Switch state (supports @bind-Checked)
`CheckedChanged`	`EventCallback<bool>`	-	Checked state change event
`Label`	`string?`	null	Switch label text
`ChildContent`	`RenderFragment?`	null	Custom label content
`Disabled`	`bool`	false	Disable switch
`ContainerClass`	`string`	""	Additional container CSS classes
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfSwitch Label="Enable notifications" @bind-Checked="notifications" />


<WfSwitch @bind-Checked="darkMode">
    Enable <strong>Dark Mode</strong>
</WfSwitch>


<WfSwitch Label="Premium feature" Disabled="true" />


<WfSwitch Label="Auto-save" @bind-Checked="autoSave" />
<WfSwitch Label="Show preview" @bind-Checked="showPreview" />
<WfSwitch Label="Enable animations" @bind-Checked="animations" />

@code {
    private bool notifications = true;
    private bool darkMode = false;
    private bool autoSave = true;
    private bool showPreview = false;
    private bool animations = true;
}

WfRange

Purpose: Range slider input with optional value display.

Parameters:

Parameter	Type	Default	Description
`Value`	`int`	0	Slider value (supports @bind-Value)
`ValueChanged`	`EventCallback<int>`	-	Value change event
`Label`	`string?`	null	Slider label
`HelpText`	`string?`	null	Help text below slider
`Min`	`int`	0	Minimum value
`Max`	`int`	100	Maximum value
`Step`	`int`	1	Step increment
`Disabled`	`bool`	false	Disable slider
`ShowValue`	`bool`	false	Display current value
`ContainerClass`	`string`	""	Additional container CSS classes
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfRange Label="Volume" 
         @bind-Value="volume"
         Min="0"
         Max="100"
         ShowValue="true" />


<WfRange Label="Price Range" 
         @bind-Value="price"
         Min="10"
         Max="1000"
         Step="10"
         ShowValue="true" />


<WfRange Label="Quality" 
         @bind-Value="quality"
         Min="1"
         Max="10"
         HelpText="1 = Low, 10 = High" />


<WfRange Label="Locked setting" 
         Value="50" 
         Disabled="true" />

@code {
    private int volume = 75;
    private int price = 100;
    private int quality = 5;
}

WfInputGroup

Purpose: Input with prepended/appended text or content.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Input element to wrap
`PrependContent`	`RenderFragment?`	null	Custom prepend content
`AppendContent`	`RenderFragment?`	null	Custom append content
`PrependText`	`string?`	null	Prepend text
`AppendText`	`string?`	null	Append text
`Label`	`string?`	null	Input group label
`HelpText`	`string?`	null	Help text
`ContainerClass`	`string`	""	Additional container CSS classes
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfInputGroup Label="Website" PrependText="https://">
    <input type="text" class="form-input" @bind="website" />
</WfInputGroup>


<WfInputGroup Label="Email" AppendText="@example.com">
    <input type="text" class="form-input" @bind="emailPrefix" />
</WfInputGroup>


<WfInputGroup Label="Price" 
              PrependText="$" 
              AppendText="USD">
    <input type="text" class="form-input" @bind="price" />
</WfInputGroup>


<WfInputGroup Label="Search">
    <PrependContent>
        <WfButton IconOnly="true">🔍</WfButton>
    </PrependContent>
    <input type="text" class="form-input" placeholder="Search..." />
    <AppendContent>
        <WfButton Size="WfButton.ButtonSize.Small">Go</WfButton>
    </AppendContent>
</WfInputGroup>

@code {
    private string website = "";
    private string emailPrefix = "";
    private string price = "";
}

Display Components

WfCard

Purpose: Card container with header, body, and footer sections.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Card body content
`HeaderContent`	`RenderFragment?`	null	Custom header content
`FooterContent`	`RenderFragment?`	null	Footer content
`Title`	`string?`	null	Card title
`Subtitle`	`string?`	null	Card subtitle
`Icon`	`string?`	null	Icon character
`Variant`	`CardVariant`	Default	Color variant
`Accent`	`bool`	false	Show accent border
`AccentColor`	`AccentColor`	Primary	Accent border color
`Clickable`	`bool`	false	Make card clickable
`Horizontal`	`bool`	false	Horizontal layout
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Card Variants (Enum):

Default - Default styling
Primary - Blue header
Success - Green header
Warning - Orange header
Error - Red header

Accent Colors (Enum):

Primary - Blue accent
Success - Green accent
Warning - Orange accent
Error - Red accent

Usage:


<WfCard Title="Card Title" Subtitle="Card subtitle">
    <p>This is the card body content.</p>
</WfCard>


<WfCard Accent="true" AccentColor="WfCard.AccentColor.Success">
    <h4>Success Card</h4>
    <p>Card with green accent border.</p>
</WfCard>


<WfCard>
    <HeaderContent>
        <h3>Custom Header</h3>
        <span>Additional header info</span>
    </HeaderContent>
    <p>Card body content.</p>
</WfCard>


<WfCard Title="Product">
    <p>Product description here.</p>
    <FooterContent>
        <WfButton Size="WfButton.ButtonSize.Small">View Details</WfButton>
        <WfLink Href="#">Learn More</WfLink>
    </FooterContent>
</WfCard>


<WfCard Icon="⚙" Variant="WfCard.CardVariant.Primary">
    <h4>Settings</h4>
    <p>Configure your preferences.</p>
</WfCard>


<WfCard Title="Click Me" Clickable="true">
    <p>This entire card is clickable.</p>
</WfCard>


<WfCard Horizontal="true">
    <img src="/image.jpg" alt="Card image" />
    <div>
        <h4>Horizontal Card</h4>
        <p>Image and content side by side.</p>
    </div>
</WfCard>

WfAlert

Purpose: Alert messages for feedback, warnings, and notifications.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Alert content
`Variant`	`AlertVariant`	Primary	Alert color variant
`Accent`	`bool`	false	Show accent border
`Filled`	`bool`	false	Solid background style
`Dismissible`	`bool`	false	Show close button
`Banner`	`bool`	false	Full-width banner style
`OnDismiss`	`EventCallback`	-	Dismiss event handler
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Alert Variants (Enum):

Primary - Blue alert
Success - Green alert (success messages)
Warning - Orange alert (warnings)
Error - Red alert (errors)
Info - Information alert

Usage:


<WfAlert Variant="WfAlert.AlertVariant.Primary">
    <strong>Info:</strong> This is an informational message.
</WfAlert>

<WfAlert Variant="WfAlert.AlertVariant.Success">
    <strong>Success!</strong> Your changes have been saved.
</WfAlert>

<WfAlert Variant="WfAlert.AlertVariant.Warning">
    <strong>Warning:</strong> Please review your input.
</WfAlert>

<WfAlert Variant="WfAlert.AlertVariant.Error">
    <strong>Error:</strong> Something went wrong.
</WfAlert>


<WfAlert Variant="WfAlert.AlertVariant.Info" 
         Dismissible="true"
         OnDismiss="HandleAlertDismiss">
    You can close this alert.
</WfAlert>


<WfAlert Variant="WfAlert.AlertVariant.Success" Filled="true">
    <strong>Completed!</strong> Task finished successfully.
</WfAlert>


<WfAlert Variant="WfAlert.AlertVariant.Warning" Accent="true">
    Important notification with accent border.
</WfAlert>


<WfAlert Variant="WfAlert.AlertVariant.Primary" Banner="true">
    This is a full-width banner alert.
</WfAlert>

@code {
    private void HandleAlertDismiss()
    {
        // Handle alert dismissal
    }
}

WfBadge

Purpose: Badges, tags, and status indicators.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Badge content
`Variant`	`BadgeVariant`	Default	Color variant
`Size`	`BadgeSize`	Medium	Badge size
`Filled`	`bool`	false	Solid background
`Pill`	`bool`	false	Pill shape (rounded)
`IsTag`	`bool`	false	Render as tag
`IsStatus`	`bool`	false	Render as status indicator
`ShowDot`	`bool`	true	Show status dot (for IsStatus)
`Pulse`	`bool`	false	Animate status dot
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Badge Variants (Enum):

Default - Default gray
Primary - Blue badge
Success - Green badge
Warning - Orange badge
Error - Red badge
Info - Info badge

Badge Sizes (Enum):

Small - Small badge
Medium - Default size
Large - Large badge

Usage:


<WfBadge>Default</WfBadge>
<WfBadge Variant="WfBadge.BadgeVariant.Primary">Primary</WfBadge>
<WfBadge Variant="WfBadge.BadgeVariant.Success">Success</WfBadge>
<WfBadge Variant="WfBadge.BadgeVariant.Warning">Warning</WfBadge>
<WfBadge Variant="WfBadge.BadgeVariant.Error">Error</WfBadge>


<WfBadge Variant="WfBadge.BadgeVariant.Primary" Filled="true">
    Filled
</WfBadge>


<WfBadge Pill="true">Pill Badge</WfBadge>


<WfBadge Size="WfBadge.BadgeSize.Small">Small</WfBadge>
<WfBadge Size="WfBadge.BadgeSize.Large">Large</WfBadge>


<WfBadge IsTag="true">Tag</WfBadge>
<WfBadge IsTag="true" Variant="WfBadge.BadgeVariant.Primary">
    Primary Tag
</WfBadge>


<WfBadge IsStatus="true" Variant="WfBadge.BadgeVariant.Success">
    Online
</WfBadge>

<WfBadge IsStatus="true" Variant="WfBadge.BadgeVariant.Warning">
    Away
</WfBadge>

<WfBadge IsStatus="true" Variant="WfBadge.BadgeVariant.Error">
    Offline
</WfBadge>


<WfBadge IsStatus="true" 
         Variant="WfBadge.BadgeVariant.Success" 
         Pulse="true">
    Live
</WfBadge>


<WfTable>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>
                <WfBadge Variant="WfBadge.BadgeVariant.Success" Filled="true">
                    Active
                </WfBadge>
            </td>
        </tr>
    </tbody>
</WfTable>

WfTable

Purpose: Data table with striped rows, hover effects, and mobile-responsive options.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Table content (thead, tbody)
`Striped`	`bool`	false	Alternate row colors
`Hover`	`bool`	false	Hover effect on rows
`Bordered`	`bool`	false	Border around table
`Compact`	`bool`	false	Reduced padding
`FixedHeader`	`bool`	false	Fixed header on scroll
`MobileCards`	`bool`	false	Convert to cards on mobile
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfTable>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>Active</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>jane@example.com</td>
            <td>Pending</td>
        </tr>
    </tbody>
</WfTable>


<WfTable Striped="true" Hover="true">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Product 1</td>
            <td>$29.99</td>
            <td>In Stock</td>
        </tr>
    </tbody>
</WfTable>


<WfTable Bordered="true" Compact="true">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>Item 1</td>
            <td>
                <WfButton Size="WfButton.ButtonSize.Small">Edit</WfButton>
            </td>
        </tr>
    </tbody>
</WfTable>


<WfTable Striped="true" Hover="true">
    <thead>
        <tr>
            <th>User</th>
            <th>Status</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>
                <WfBadge Variant="WfBadge.BadgeVariant.Success" Filled="true">
                    Active
                </WfBadge>
            </td>
            <td>Admin</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>
                <WfBadge Variant="WfBadge.BadgeVariant.Warning" Filled="true">
                    Pending
                </WfBadge>
            </td>
            <td>User</td>
        </tr>
    </tbody>
</WfTable>


<WfTable MobileCards="true" Hover="true">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>555-0100</td>
        </tr>
    </tbody>
</WfTable>

WfThumbnail

Purpose: Image thumbnail with optional caption.

Parameters:

Parameter	Type	Default	Description
`Caption`	`RenderFragment?`	null	Custom caption content
`ImageUrl`	`string?`	null	Image source URL
`Alt`	`string?`	null	Image alt text
`Title`	`string?`	null	Caption title
`Text`	`string?`	null	Caption text
`Accent`	`bool`	false	Show accent border
`Clickable`	`bool`	false	Clickable hover effect
`Circle`	`bool`	false	Circular shape
`Square`	`bool`	false	Square aspect ratio
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfThumbnail ImageUrl="/images/photo.jpg" 
             Alt="Photo description" />


<WfThumbnail ImageUrl="/images/photo.jpg"
             Title="Photo Title"
             Text="Brief description of the image." />


<WfThumbnail ImageUrl="/images/photo.jpg"
             Title="Featured Image"
             Accent="true" />


<WfThumbnail ImageUrl="/images/photo.jpg"
             Clickable="true" />


<WfThumbnail ImageUrl="/images/avatar.jpg"
             Circle="true" />


<WfThumbnail ImageUrl="/images/product.jpg"
             Square="true" />


<WfThumbnail ImageUrl="/images/photo.jpg">
    <Caption>
        <h4>Custom Caption</h4>
        <p>Custom caption content with <strong>formatting</strong>.</p>
    </Caption>
</WfThumbnail>

WfThumbnailGrid

Purpose: Responsive grid layout for displaying multiple thumbnails.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Thumbnail components
`Size`	`GridSize`	Medium	Grid item size
`CustomGap`	`string?`	null	Custom gap value
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Grid Sizes (Enum):

Small - Small grid items (more per row)
Medium - Default size
Large - Large grid items (fewer per row)

Usage:


<WfThumbnailGrid>
    <WfThumbnail ImageUrl="/images/1.jpg" Square="true" />
    <WfThumbnail ImageUrl="/images/2.jpg" Square="true" />
    <WfThumbnail ImageUrl="/images/3.jpg" Square="true" />
    <WfThumbnail ImageUrl="/images/4.jpg" Square="true" />
    <WfThumbnail ImageUrl="/images/5.jpg" Square="true" />
    <WfThumbnail ImageUrl="/images/6.jpg" Square="true" />
</WfThumbnailGrid>


<WfThumbnailGrid Size="WfThumbnailGrid.GridSize.Small">
    <WfThumbnail ImageUrl="/images/1.jpg" Square="true" />
    <WfThumbnail ImageUrl="/images/2.jpg" Square="true" />
    <WfThumbnail ImageUrl="/images/3.jpg" Square="true" />
</WfThumbnailGrid>


<WfThumbnailGrid Size="WfThumbnailGrid.GridSize.Large">
    <WfThumbnail ImageUrl="/images/1.jpg" Square="true" />
    <WfThumbnail ImageUrl="/images/2.jpg" Square="true" />
</WfThumbnailGrid>


<WfThumbnailGrid>
    @foreach (var photo in photos)
    {
        <WfThumbnail ImageUrl="@photo.Url"
                     Title="@photo.Title"
                     Square="true"
                     Clickable="true" />
    }
</WfThumbnailGrid>

@code {
    private List<Photo> photos = new();
}

WfThumbnailList

Purpose: Horizontal list layout with thumbnails and content side-by-side.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	WfThumbnailListItem components
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:

<WfThumbnailList>
    <WfThumbnailListItem ImageUrl="/images/1.jpg"
                         Title="Item Title"
                         Description="Brief description of this item." />
                         
    <WfThumbnailListItem ImageUrl="/images/2.jpg"
                         Title="Another Item"
                         Description="More detailed content here." />
                         
    <WfThumbnailListItem ImageUrl="/images/3.jpg"
                         Title="Third Item"
                         Description="Additional information." />
</WfThumbnailList>

WfThumbnailListItem

Purpose: Individual item in a thumbnail list with image and content.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Custom content (overrides Description)
`ImageUrl`	`string?`	null	Thumbnail image URL
`Alt`	`string?`	null	Image alt text
`Title`	`string?`	null	Item title
`Description`	`string?`	null	Item description
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfThumbnailList>
    <WfThumbnailListItem ImageUrl="/images/article.jpg"
                         Title="Article Title"
                         Description="Article summary goes here." />
</WfThumbnailList>


<WfThumbnailList>
    <WfThumbnailListItem ImageUrl="/images/product.jpg"
                         Title="Product Name">
        <p class="text-secondary">$29.99</p>
        <WfBadge Variant="WfBadge.BadgeVariant.Success">In Stock</WfBadge>
        <WfButton Size="WfButton.ButtonSize.Small">Add to Cart</WfButton>
    </WfThumbnailListItem>
</WfThumbnailList>


<WfThumbnailList>
    @foreach (var article in articles)
    {
        <WfThumbnailListItem ImageUrl="@article.ImageUrl"
                             Title="@article.Title"
                             Description="@article.Summary" />
    }
</WfThumbnailList>

@code {
    private List<Article> articles = new();
}

WfNavbar

Purpose: Top navigation bar with branding, links, and collapsible mobile menu.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Navigation content
`BrandContent`	`RenderFragment?`	null	Custom brand content
`Brand`	`string?`	null	Brand text
`BrandHref`	`string`	"#"	Brand link URL
`Variant`	`NavbarVariant`	Default	Color variant
`Fixed`	`bool`	false	Fix to viewport edge
`Position`	`FixedPosition`	Top	Fixed position (Top/Bottom)
`Sticky`	`bool`	false	Sticky positioning
`Fluid`	`bool`	false	Fluid container
`Collapsible`	`bool`	false	Enable mobile collapse
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Navbar Variants (Enum):

Default - Default styling
Dark - Dark navbar
Light - Light navbar

Fixed Positions (Enum):

Top - Fixed to top
Bottom - Fixed to bottom

Usage:


<WfNavbar Brand="My App">
    <ul class="navbar-nav">
        <li class="nav-item">
            <WfNavLink Href="/">Home</WfNavLink>
        </li>
        <li class="nav-item">
            <WfNavLink Href="/about">About</WfNavLink>
        </li>
        <li class="nav-item">
            <WfNavLink Href="/contact">Contact</WfNavLink>
        </li>
    </ul>
</WfNavbar>


<WfNavbar Brand="My App" 
          Fixed="true" 
          Position="WfNavbar.FixedPosition.Top">
    <ul class="navbar-nav">
        <li class="nav-item">
            <WfNavLink Href="/">Home</WfNavLink>
        </li>
    </ul>
</WfNavbar>


<div style="height: 70px;"></div>


<WfNavbar Brand="My App" Collapsible="true">
    <ul class="navbar-nav">
        <li class="nav-item">
            <WfNavLink Href="/">Home</WfNavLink>
        </li>
        <li class="nav-item">
            <WfNavLink Href="/products">Products</WfNavLink>
        </li>
        <li class="nav-item">
            <WfNavLink Href="/services">Services</WfNavLink>
        </li>
    </ul>
</WfNavbar>


<WfNavbar BrandHref="/">
    <BrandContent>
        <img src="/logo.svg" alt="Logo" style="height: 32px;" />
        <span>My App</span>
    </BrandContent>
    <ul class="navbar-nav">
        <li class="nav-item">
            <WfNavLink Href="/">Home</WfNavLink>
        </li>
    </ul>
</WfNavbar>


<WfNavbar Brand="My App" Fluid="true">
    <ul class="navbar-nav">
        <li class="nav-item">
            <WfNavLink Href="/">Home</WfNavLink>
        </li>
    </ul>
</WfNavbar>

WfNavLink

Purpose: Navigation link with active state.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Link content
`Href`	`string`	"#"	Link URL
`Active`	`bool`	false	Active state
`Disabled`	`bool`	false	Disabled state
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfNavbar Brand="My App">
    <ul class="navbar-nav">
        <li class="nav-item">
            <WfNavLink Href="/" Active="true">Home</WfNavLink>
        </li>
        <li class="nav-item">
            <WfNavLink Href="/about">About</WfNavLink>
        </li>
        <li class="nav-item">
            <WfNavLink Href="/contact">Contact</WfNavLink>
        </li>
    </ul>
</WfNavbar>


<WfNavbar Brand="My App">
    <ul class="navbar-nav">
        <li class="nav-item">
            <WfNavLink Href="/" Active="@(currentPage == "/")">
                Home
            </WfNavLink>
        </li>
        <li class="nav-item">
            <WfNavLink Href="/products" Active="@(currentPage == "/products")">
                Products
            </WfNavLink>
        </li>
    </ul>
</WfNavbar>


<WfNavLink Href="/coming-soon" Disabled="true">
    Coming Soon
</WfNavLink>

@code {
    private string currentPage = "/";
}

WfTabs

Purpose: Tab navigation with tabs or pills style.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	WfTabItem components
`Style`	`TabStyle`	Tabs	Tab style (Tabs/Pills)
`Vertical`	`bool`	false	Vertical orientation
`Fill`	`bool`	false	Fill available width
`Justified`	`bool`	false	Justify tabs equally
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Tab Styles (Enum):

Tabs - Traditional tabs
Pills - Pill-shaped tabs

Usage:


<WfTabs>
    <WfTabItem Active="true">Tab 1</WfTabItem>
    <WfTabItem>Tab 2</WfTabItem>
    <WfTabItem>Tab 3</WfTabItem>
</WfTabs>


<WfTabs Style="WfTabs.TabStyle.Pills">
    <WfTabItem Active="true">Home</WfTabItem>
    <WfTabItem>Profile</WfTabItem>
    <WfTabItem>Messages</WfTabItem>
</WfTabs>


<WfTabs>
    <WfTabItem Active="@(activeTab == 0)" OnClick="() => activeTab = 0">
        Overview
    </WfTabItem>
    <WfTabItem Active="@(activeTab == 1)" OnClick="() => activeTab = 1">
        Details
    </WfTabItem>
    <WfTabItem Active="@(activeTab == 2)" OnClick="() => activeTab = 2">
        Settings
    </WfTabItem>
</WfTabs>

<div class="tab-content">
    @if (activeTab == 0)
    {
        <p>Overview content</p>
    }
    else if (activeTab == 1)
    {
        <p>Details content</p>
    }
    else
    {
        <p>Settings content</p>
    }
</div>


<WfTabs Vertical="true">
    <WfTabItem Active="true">Tab 1</WfTabItem>
    <WfTabItem>Tab 2</WfTabItem>
</WfTabs>

@code {
    private int activeTab = 0;
}

WfTabItem

Purpose: Individual tab within WfTabs.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Tab label content
`Href`	`string`	"#"	Link URL
`Active`	`bool`	false	Active state
`Disabled`	`bool`	false	Disabled state
`PreventDefault`	`bool`	true	Prevent default navigation
`OnClick`	`EventCallback`	-	Click event handler
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:




<WfTabs>
    <WfTabItem Active="true" OnClick="HandleTabClick">
        Clickable Tab
    </WfTabItem>
</WfTabs>


<WfTabs>
    <WfTabItem>Active Tab</WfTabItem>
    <WfTabItem Disabled="true">Disabled Tab</WfTabItem>
</WfTabs>

@code {
    private void HandleTabClick()
    {
        // Handle tab click
    }
}

WfBreadcrumb

Purpose: Breadcrumb navigation container.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	WfBreadcrumbItem components
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:

<WfBreadcrumb>
    <WfBreadcrumbItem Href="/">Home</WfBreadcrumbItem>
    <WfBreadcrumbItem Href="/products">Products</WfBreadcrumbItem>
    <WfBreadcrumbItem Href="/products/electronics">Electronics</WfBreadcrumbItem>
    <WfBreadcrumbItem Active="true">Laptops</WfBreadcrumbItem>
</WfBreadcrumb>

WfBreadcrumbItem

Purpose: Individual breadcrumb item.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Item content
`Href`	`string?`	null	Link URL
`Active`	`bool`	false	Active/current page
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:




<WfBreadcrumb>
    @foreach (var crumb in breadcrumbs)
    {
        <WfBreadcrumbItem Href="@crumb.Url" 
                          Active="@crumb.IsActive">
            @crumb.Label
        </WfBreadcrumbItem>
    }
</WfBreadcrumb>

@code {
    private List<Breadcrumb> breadcrumbs = new()
    {
        new Breadcrumb { Label = "Home", Url = "/" },
        new Breadcrumb { Label = "Products", Url = "/products" },
        new Breadcrumb { Label = "Current", IsActive = true }
    };
    
    public class Breadcrumb
    {
        public string Label { get; set; }
        public string Url { get; set; }
        public bool IsActive { get; set; }
    }
}

WfPagination

Purpose: Page navigation with configurable page range.

Parameters:

Parameter	Type	Default	Description
`CurrentPage`	`int`	1	Current page number
`TotalPages`	`int`	1	Total number of pages
`MaxVisiblePages`	`int`	5	Maximum visible page buttons
`ShowPrevious`	`bool`	true	Show previous button
`ShowNext`	`bool`	true	Show next button
`ShowPages`	`bool`	true	Show page numbers
`OnPageChanged`	`EventCallback<int>`	-	Page change event
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfPagination CurrentPage="@currentPage" 
              TotalPages="10" 
              OnPageChanged="HandlePageChanged" />


<WfPagination CurrentPage="@currentPage" 
              TotalPages="20" 
              MaxVisiblePages="7"
              OnPageChanged="HandlePageChanged" />


<WfPagination CurrentPage="@currentPage" 
              TotalPages="5" 
              ShowPages="false"
              OnPageChanged="HandlePageChanged" />


<div>
    @foreach (var item in GetPageItems())
    {
        <p>@item</p>
    }
</div>

<WfPagination CurrentPage="@currentPage" 
              TotalPages="@totalPages" 
              OnPageChanged="HandlePageChanged" />

@code {
    private int currentPage = 1;
    private int totalPages = 10;
    private int itemsPerPage = 10;
    private List<string> allItems = new();

    private void HandlePageChanged(int page)
    {
        currentPage = page;
        // Load data for new page
    }
    
    private List<string> GetPageItems()
    {
        var skip = (currentPage - 1) * itemsPerPage;
        return allItems.Skip(skip).Take(itemsPerPage).ToList();
    }
}

Overlay Components

WfModal

Purpose: Modal dialog with customizable size, header, body, and footer.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Modal body content
`HeaderContent`	`RenderFragment?`	null	Custom header content
`FooterContent`	`RenderFragment?`	null	Footer content
`Title`	`string?`	null	Modal title
`IsVisible`	`bool`	false	Visibility state (supports @bind-IsVisible)
`IsVisibleChanged`	`EventCallback<bool>`	-	Visibility change event
`Size`	`ModalSize`	Medium	Modal size
`Centered`	`bool`	false	Center vertically
`Scrollable`	`bool`	false	Scrollable content
`FullScreen`	`bool`	false	Full screen mode
`FullScreenMobile`	`bool`	false	Full screen on mobile only
`BottomSheet`	`bool`	false	Bottom sheet style (mobile)
`ShowCloseButton`	`bool`	true	Show X close button
`CloseOnBackdropClick`	`bool`	true	Close when clicking outside
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Modal Sizes (Enum):

Small - Small modal
Medium - Default size
Large - Large modal
ExtraLarge - Extra large modal

Usage:


<WfButton OnClick="() => showModal = true">Open Modal</WfButton>

<WfModal @bind-IsVisible="showModal" Title="Modal Title">
    <p>This is the modal body content.</p>
    <FooterContent>
        <WfButton OnClick="() => showModal = false">Cancel</WfButton>
        <WfButton Variant="WfButton.ButtonVariant.Primary" Filled="true">
            Confirm
        </WfButton>
    </FooterContent>
</WfModal>


<WfModal @bind-IsVisible="showSmallModal" 
         Title="Small Modal"
         Size="WfModal.ModalSize.Small">
    <p>Small modal content.</p>
</WfModal>

<WfModal @bind-IsVisible="showLargeModal" 
         Title="Large Modal"
         Size="WfModal.ModalSize.Large">
    <p>Large modal content.</p>
</WfModal>


<WfModal @bind-IsVisible="showScrollModal" 
         Title="Long Content"
         Scrollable="true">
    @for (int i = 0; i < 50; i++)
    {
        <p>Line @i</p>
    }
</WfModal>


<WfModal @bind-IsVisible="showCenteredModal" 
         Title="Centered Modal"
         Centered="true">
    <p>This modal is vertically centered.</p>
</WfModal>


<WfModal @bind-IsVisible="showCustomModal">
    <HeaderContent>
        <h3>Custom Header</h3>
        <span class="text-secondary">Subtitle</span>
    </HeaderContent>
    <p>Modal content.</p>
</WfModal>


<WfModal @bind-IsVisible="showModal" 
         Title="Important"
         ShowCloseButton="false"
         CloseOnBackdropClick="false">
    <p>This modal requires explicit action.</p>
    <FooterContent>
        <WfButton Variant="WfButton.ButtonVariant.Primary" 
                  OnClick="HandleAction">
            I Understand
        </WfButton>
    </FooterContent>
</WfModal>

@code {
    private bool showModal = false;
    private bool showSmallModal = false;
    private bool showLargeModal = false;
    
    private void HandleAction()
    {
        // Perform action
        showModal = false;
    }
}

WfDropdown

Purpose: Dropdown menu with customizable button and direction.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	WfDropdownItem components
`ButtonContent`	`RenderFragment?`	null	Custom button content
`ButtonText`	`string?`	null	Button text
`ButtonVariant`	`ButtonVariant`	Default	Button color variant
`Direction`	`DropdownDirection`	Down	Dropdown direction
`Alignment`	`DropdownAlignment`	Left	Menu alignment
`ShowCaret`	`bool`	true	Show dropdown caret
`MobileBottomSheet`	`bool`	false	Bottom sheet on mobile
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Button Variants (Enum):

Default - Default button
Primary - Primary button
Success - Success button
Warning - Warning button
Error - Error button

Dropdown Directions (Enum):

Down - Drop down (default)
Up - Drop up
Start - Drop to start (left)
End - Drop to end (right)

Dropdown Alignments (Enum):

Left - Align left
Right - Align right
Center - Align center

Usage:


<WfDropdown ButtonText="Dropdown Menu">
    <WfDropdownItem>Action</WfDropdownItem>
    <WfDropdownItem>Another action</WfDropdownItem>
    <WfDropdownItem IsDivider="true" />
    <WfDropdownItem>Something else</WfDropdownItem>
</WfDropdown>


<WfDropdown ButtonText="Options" 
            ButtonVariant="WfDropdown.ButtonVariant.Primary">
    <WfDropdownItem>Edit</WfDropdownItem>
    <WfDropdownItem>Delete</WfDropdownItem>
</WfDropdown>


<WfDropdown ButtonText="Account">
    <WfDropdownItem IsHeader="true">Settings</WfDropdownItem>
    <WfDropdownItem>Profile</WfDropdownItem>
    <WfDropdownItem>Preferences</WfDropdownItem>
    <WfDropdownItem IsDivider="true" />
    <WfDropdownItem>Logout</WfDropdownItem>
</WfDropdown>


<WfDropdown ButtonText="Dropup" 
            Direction="WfDropdown.DropdownDirection.Up">
    <WfDropdownItem>Action 1</WfDropdownItem>
    <WfDropdownItem>Action 2</WfDropdownItem>
</WfDropdown>


<WfDropdown ButtonText="Right Aligned" 
            Alignment="WfDropdown.DropdownAlignment.Right">
    <WfDropdownItem>Action 1</WfDropdownItem>
    <WfDropdownItem>Action 2</WfDropdownItem>
</WfDropdown>


<WfDropdown>
    <ButtonContent>
        <span>⚙</span> Settings
    </ButtonContent>
    <WfDropdownItem>General</WfDropdownItem>
    <WfDropdownItem>Privacy</WfDropdownItem>
</WfDropdown>

WfDropdownItem

Purpose: Individual item within a dropdown menu.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Item content
`Href`	`string`	"#"	Link URL
`Active`	`bool`	false	Active state
`Disabled`	`bool`	false	Disabled state
`IsDivider`	`bool`	false	Render as divider
`IsHeader`	`bool`	false	Render as header
`PreventDefault`	`bool`	true	Prevent default navigation
`OnClick`	`EventCallback`	-	Click event handler
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:




<WfDropdown ButtonText="Actions">
    <WfDropdownItem OnClick="HandleEdit">Edit</WfDropdownItem>
    <WfDropdownItem OnClick="HandleDelete">Delete</WfDropdownItem>
</WfDropdown>


<WfDropdown ButtonText="Menu">
    <WfDropdownItem Active="true">Current Page</WfDropdownItem>
    <WfDropdownItem>Other Page</WfDropdownItem>
    <WfDropdownItem Disabled="true">Coming Soon</WfDropdownItem>
</WfDropdown>

@code {
    private void HandleEdit()
    {
        // Handle edit action
    }
    
    private void HandleDelete()
    {
        // Handle delete action
    }
}

WfToast

Purpose: Toast notification with auto-hide and positioning.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Toast body content
`Title`	`string?`	null	Toast title
`Variant`	`ToastVariant`	Primary	Color variant
`Position`	`ToastPosition`	TopRight	Screen position
`Dismissible`	`bool`	true	Show close button
`AutoHideDuration`	`int?`	null	Auto-hide duration (ms)
`OnDismiss`	`EventCallback`	-	Dismiss event handler
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Toast Variants (Enum):

Primary - Blue toast
Success - Green toast
Warning - Orange toast
Error - Red toast
Info - Info toast

Toast Positions (Enum):

TopLeft - Top left corner
TopCenter - Top center
TopRight - Top right corner
BottomLeft - Bottom left corner
BottomCenter - Bottom center
BottomRight - Bottom right corner

Usage:


<WfToast Title="Notification">
    This is a toast notification.
</WfToast>


<WfToast Title="Success" 
         Variant="WfToast.ToastVariant.Success"
         AutoHideDuration="3000">
    Operation completed successfully!
</WfToast>


<WfToast Title="Error" 
         Variant="WfToast.ToastVariant.Error">
    An error occurred. Please try again.
</WfToast>


<WfToast Position="WfToast.ToastPosition.TopCenter">
    Top center toast
</WfToast>

<WfToast Position="WfToast.ToastPosition.BottomRight">
    Bottom right toast
</WfToast>


<WfToast Title="Info" 
         OnDismiss="HandleToastDismiss">
    Important information here.
</WfToast>

@code {
    private void HandleToastDismiss()
    {
        // Handle toast dismissal
    }
}

WfAccordion

Purpose: Accordion container for collapsible sections.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	WfAccordionItem components
`AllowMultiple`	`bool`	false	Allow multiple sections open
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<WfAccordion>
    <WfAccordionItem Title="Section 1" IsExpanded="true">
        <p>Content for section 1.</p>
    </WfAccordionItem>
    <WfAccordionItem Title="Section 2">
        <p>Content for section 2.</p>
    </WfAccordionItem>
    <WfAccordionItem Title="Section 3">
        <p>Content for section 3.</p>
    </WfAccordionItem>
</WfAccordion>


<WfAccordion AllowMultiple="true">
    <WfAccordionItem Title="Always Open">
        <p>This can stay open.</p>
    </WfAccordionItem>
    <WfAccordionItem Title="Also Open">
        <p>This too.</p>
    </WfAccordionItem>
</WfAccordion>


<WfAccordion>
    <WfAccordionItem Title="What is Wireframe UI?">
        <p>Wireframe UI is a flat minimalist Blazor component library...</p>
    </WfAccordionItem>
    <WfAccordionItem Title="How do I install it?">
        <p>Copy the .razor files to your project and include the CSS...</p>
    </WfAccordionItem>
    <WfAccordionItem Title="Is it responsive?">
        <p>Yes! All components are mobile-first and fully responsive.</p>
    </WfAccordionItem>
</WfAccordion>

WfAccordionItem

Purpose: Individual collapsible section within an accordion.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Section content
`Title`	`string?`	null	Section title/header
`IsExpanded`	`bool`	false	Initial expanded state
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:




<WfAccordion>
    @foreach (var item in items)
    {
        <WfAccordionItem Title="@item.Title" IsExpanded="@item.IsOpen">
            <p>@item.Content</p>
        </WfAccordionItem>
    }
</WfAccordion>

@code {
    private List<AccordionData> items = new();
    
    public class AccordionData
    {
        public string Title { get; set; }
        public string Content { get; set; }
        public bool IsOpen { get; set; }
    }
}

Progress & Loading Components

WfProgress

Purpose: Progress bar with variants, sizes, and optional label.

Parameters:

Parameter	Type	Default	Description
`Value`	`int`	0	Progress value (0-100)
`Variant`	`ProgressVariant`	Primary	Color variant
`Size`	`ProgressSize`	Medium	Progress bar size
`ShowLabel`	`bool`	false	Show percentage label
`Striped`	`bool`	false	Striped pattern
`Animated`	`bool`	false	Animate stripes
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Progress Variants (Enum):

Primary - Blue progress bar
Success - Green progress bar
Warning - Orange progress bar
Error - Red progress bar

Progress Sizes (Enum):

Small - Small/thin progress bar
Medium - Default size
Large - Large/thick progress bar

Usage:


<WfProgress Value="75" />


<WfProgress Value="60" ShowLabel="true" />


<WfProgress Value="100" Variant="WfProgress.ProgressVariant.Success" />
<WfProgress Value="75" Variant="WfProgress.ProgressVariant.Primary" />
<WfProgress Value="50" Variant="WfProgress.ProgressVariant.Warning" />
<WfProgress Value="25" Variant="WfProgress.ProgressVariant.Error" />


<WfProgress Value="70" Size="WfProgress.ProgressSize.Small" />
<WfProgress Value="70" Size="WfProgress.ProgressSize.Large" />


<WfProgress Value="80" Striped="true" />
<WfProgress Value="80" Striped="true" Animated="true" />


<WfProgress Value="@progress" ShowLabel="true" />
<WfButton OnClick="IncrementProgress">Increase</WfButton>

@code {
    private int progress = 0;
    
    private void IncrementProgress()
    {
        progress = Math.Min(100, progress + 10);
    }
}

WfSpinner

Purpose: Loading spinner with multiple styles.

Parameters:

Parameter	Type	Default	Description
`Type`	`SpinnerType`	Spinner	Spinner style
`Size`	`SpinnerSize`	Medium	Spinner size
`Variant`	`SpinnerVariant`	Primary	Color variant
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Spinner Types (Enum):

Spinner - Circular spinner
LoadingDots - Three bouncing dots
LoadingBars - Three animated bars

Spinner Sizes (Enum):

Small - Small spinner
Medium - Default size
Large - Large spinner
ExtraLarge - Extra large spinner

Spinner Variants (Enum):

Primary - Blue spinner
Success - Green spinner
Warning - Orange spinner
Error - Red spinner

Usage:


<WfSpinner />


<WfSpinner Type="WfSpinner.SpinnerType.LoadingDots" />


<WfSpinner Type="WfSpinner.SpinnerType.LoadingBars" />


<WfSpinner Size="WfSpinner.SpinnerSize.Small" />
<WfSpinner Size="WfSpinner.SpinnerSize.Large" />
<WfSpinner Size="WfSpinner.SpinnerSize.ExtraLarge" />


<WfSpinner Variant="WfSpinner.SpinnerVariant.Success" />
<WfSpinner Variant="WfSpinner.SpinnerVariant.Warning" />
<WfSpinner Variant="WfSpinner.SpinnerVariant.Error" />


@if (isLoading)
{
    <div style="text-align: center; padding: 2rem;">
        <WfSpinner Size="WfSpinner.SpinnerSize.Large" />
        <p style="margin-top: 1rem;">Loading...</p>
    </div>
}
else
{
    <p>Content loaded!</p>
}

@code {
    private bool isLoading = true;
}

Utility Components

WfLink

Purpose: Styled hyperlink with variants.

Parameters:

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment?`	null	Link content
`Href`	`string`	"#"	Link URL
`Target`	`string?`	null	Link target (_blank, etc.)
`Variant`	`LinkVariant`	Default	Color variant
`Underline`	`bool`	false	Always underlined
`NoUnderline`	`bool`	false	Never underlined
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Link Variants (Enum):

Default - Default link color
Primary - Primary blue
Secondary - Secondary gray
Success - Green link
Warning - Orange link
Error - Red link

Usage:


<WfLink Href="/page">Go to page</WfLink>


<WfLink Href="https://example.com" Target="_blank">
    External Link
</WfLink>


<WfLink Variant="WfLink.LinkVariant.Primary" Href="/primary">
    Primary Link
</WfLink>

<WfLink Variant="WfLink.LinkVariant.Success" Href="/success">
    Success Link
</WfLink>

<WfLink Variant="WfLink.LinkVariant.Error" Href="/danger">
    Danger Link
</WfLink>


<WfLink Underline="true" Href="/underlined">
    Underlined Link
</WfLink>


<WfLink NoUnderline="true" Href="/no-underline">
    No Underline Link
</WfLink>


<WfCard Title="Card">
    <p>Card content.</p>
    <FooterContent>
        <WfLink Href="/learn-more">Learn More</WfLink>
        <WfLink Href="/details">View Details</WfLink>
    </FooterContent>
</WfCard>

WfDivider

Purpose: Horizontal or vertical divider line.

Parameters:

Parameter	Type	Default	Description
`Vertical`	`bool`	false	Render as vertical divider
`ExtraClass`	`string`	""	Additional CSS classes
`AdditionalAttributes`	`Dictionary<string, object>?`	null	Additional HTML attributes

Usage:


<p>Section 1</p>
<WfDivider />
<p>Section 2</p>


<div style="display: flex; align-items: center; gap: 1rem;">
    <span>Item 1</span>
    <WfDivider Vertical="true" />
    <span>Item 2</span>
    <WfDivider Vertical="true" />
    <span>Item 3</span>
</div>


<WfDivider ExtraClass="my-4" />


<WfRow>
    <WfColumn Span="12">
        <h2>Section 1</h2>
        <p>Content...</p>
    </WfColumn>
</WfRow>

<WfDivider />

<WfRow>
    <WfColumn Span="12">
        <h2>Section 2</h2>
        <p>Content...</p>
    </WfColumn>
</WfRow>

Best Practices

1. Form Validation Pattern

<EditForm Model="@model" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />
    
    <WfInput Label="Email" 
             Type="email" 
             @bind-Value="model.Email"
             State="@GetValidationState(() => model.Email)"
             ErrorMessage="@GetErrorMessage(() => model.Email)" />
    
    <WfInput Label="Password" 
             Type="password" 
             @bind-Value="model.Password"
             State="@GetValidationState(() => model.Password)"
             Required="true" />
    
    <WfButton Variant="WfButton.ButtonVariant.Primary" 
              Filled="true"
              Type="submit">
        Submit
    </WfButton>
</EditForm>

@code {
    private MyModel model = new();
    
    private WfInput.ValidationState GetValidationState(Expression<Func<string>> property)
    {
        // Implement validation state logic
        return WfInput.ValidationState.None;
    }
    
    private string GetErrorMessage(Expression<Func<string>> property)
    {
        // Return validation error message
        return "";
    }
    
    private void HandleSubmit()
    {
        // Handle form submission
    }
}


<WfButton Variant="WfButton.ButtonVariant.Error" 
          OnClick="() => showDeleteModal = true">
    Delete
</WfButton>


<WfModal @bind-IsVisible="showDeleteModal" 
         Title="Confirm Deletion">
    <p>Are you sure you want to delete this item? This action cannot be undone.</p>
    
    <FooterContent>
        <WfButton OnClick="() => showDeleteModal = false">
            Cancel
        </WfButton>
        <WfButton Variant="WfButton.ButtonVariant.Error" 
                  Filled="true"
                  OnClick="HandleDelete">
            Delete
        </WfButton>
    </FooterContent>
</WfModal>

@code {
    private bool showDeleteModal = false;
    
    private void HandleDelete()
    {
        // Perform deletion
        showDeleteModal = false;
        // Show success toast
    }
}

3. Dynamic Table Pattern

<WfTable Striped="true" Hover="true">
    <thead>
        <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in items)
        {
            <tr>
                <td>@item.Name</td>
                <td>
                    <WfBadge Variant="@GetStatusVariant(item.Status)" 
                             Filled="true">
                        @item.Status
                    </WfBadge>
                </td>
                <td>
                    <WfButton Size="WfButton.ButtonSize.Small" 
                              OnClick="() => Edit(item)">
                        Edit
                    </WfButton>
                </td>
            </tr>
        }
    </tbody>
</WfTable>

@code {
    private List<Item> items = new();
    
    private WfBadge.BadgeVariant GetStatusVariant(string status)
    {
        return status switch
        {
            "Active" => WfBadge.BadgeVariant.Success,
            "Pending" => WfBadge.BadgeVariant.Warning,
            "Inactive" => WfBadge.BadgeVariant.Error,
            _ => WfBadge.BadgeVariant.Default
        };
    }
    
    private void Edit(Item item)
    {
        // Handle edit
    }
}

4. Responsive Layout Pattern

<WfContainer>
    <WfRow Gap="WfRow.GapSize.Large">
        
        <WfColumn Xs="12" Md="4">
            <WfCard Title="Filters">
                
            </WfCard>
        </WfColumn>
        
        
        <WfColumn Xs="12" Md="8">
            <WfCard Title="Results">
                
            </WfCard>
        </WfColumn>
    </WfRow>
</WfContainer>

5. Loading State Pattern

@if (isLoading)
{
    <div style="text-align: center; padding: 3rem;">
        <WfSpinner Size="WfSpinner.SpinnerSize.Large" />
        <p style="margin-top: 1rem; color: var(--color-text-secondary);">
            Loading data...
        </p>
    </div>
}
else if (hasError)
{
    <WfAlert Variant="WfAlert.AlertVariant.Error">
        <strong>Error:</strong> Failed to load data. Please try again.
    </WfAlert>
}
else
{
    
    <WfCard Title="Data">
        <p>@data</p>
    </WfCard>
}

@code {
    private bool isLoading = true;
    private bool hasError = false;
    private string data = "";
    
    protected override async Task OnInitializedAsync()
    {
        try
        {
            data = await LoadData();
        }
        catch
        {
            hasError = true;
        }
        finally
        {
            isLoading = false;
        }
    }
}

<WfTabs>
    @foreach (var tab in tabs)
    {
        <WfTabItem Active="@(activeTab == tab.Id)" 
                   OnClick="() => activeTab = tab.Id">
            @tab.Name
        </WfTabItem>
    }
</WfTabs>

<div style="margin-top: 1.5rem;">
    @switch (activeTab)
    {
        case "overview":
            <OverviewContent />
            break;
        case "details":
            <DetailsContent />
            break;
        case "settings":
            <SettingsContent />
            break;
    }
</div>

@code {
    private string activeTab = "overview";
    private List<Tab> tabs = new()
    {
        new Tab { Id = "overview", Name = "Overview" },
        new Tab { Id = "details", Name = "Details" },
        new Tab { Id = "settings", Name = "Settings" }
    };
}

Theming & Customization

CSS Variables

Wireframe UI uses CSS custom properties (variables) for easy theming:

:root {
    /* Background Colors */
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #242424;
    --color-bg-tertiary: #2a2a2a;
    
    /* Text Colors */
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #a0a0a0;
    --color-text-tertiary: #808080;
    
    /* Border Colors */
    --color-border-primary: #404040;
    --color-border-secondary: #333333;
    
    /* Accent Colors */
    --color-accent-blue: #4a9eff;
    --color-accent-green: #4ade80;
    --color-accent-orange: #fb923c;
    --color-accent-red: #f87171;
    --color-accent-purple: #a78bfa;
    --color-accent-yellow: #fbbf24;
}

Custom Theme Example

Create a custom theme by overriding CSS variables:

/* custom-theme.css */
:root {
    /* Custom color scheme */
    --color-bg-primary: #0a0e27;
    --color-bg-secondary: #141937;
    --color-accent-blue: #00d4ff;
    --color-accent-green: #00ff88;
}

Include after the Wireframe UI CSS:

<link href="css/wireframe/base.css" rel="stylesheet" />
<link href="css/custom-theme.css" rel="stylesheet" />

Component Customization

All components accept AdditionalAttributes for custom styling:


<WfCard class="my-custom-card" style="border-radius: 8px;">
    Content
</WfCard>


<WfButton data-test-id="submit-btn" aria-label="Submit form">
    Submit
</WfButton>


<WfInput id="email-input" @bind-Value="email" />

Product	Compatible and additional computed target framework versions.
.NET	net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed.

Product

.NET

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net9.0
- Microsoft.AspNetCore.Components.Web (>= 9.0.8)

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last Updated
4.0.0	191	11/26/2025
3.1.3	249	11/16/2025

WireFrame.UI 3.1.3

Wireframe UI Blazor Component Library

Comprehensive Documentation & Usage Guide

Table of Contents

Overview

What is Wireframe UI?

Key Features

Design System

Installation

Step 1: Copy Component Files

Step 2: Add CSS References

Step 3: Update _Imports.razor

Quick Start Example

Core Concepts

Two-Way Binding

Event Callbacks

Additional Attributes

Strongly Typed Enums

Layout Components

WfContainer

WfRow

WfColumn

Button Components

WfButton

WfButtonGroup

Form Components

WfInput

WfTextarea

WfSelect

WfCheckbox

WfRadio

WfSwitch

WfRange

WfInputGroup

Display Components

WfCard

WfAlert

WfBadge

WfTable

WfThumbnail

WfThumbnailGrid

WfThumbnailList

WfThumbnailListItem

Navigation Components

WfNavbar

WfNavLink

WfTabs

WfTabItem

WfBreadcrumb

WfBreadcrumbItem

WfPagination

Overlay Components

WfModal

WfDropdown

WfDropdownItem

WfToast

WfAccordion

WfAccordionItem

Progress & Loading Components

WfProgress

WfSpinner

Utility Components

WfLink

WfDivider

Best Practices

1. Form Validation Pattern

2. Modal Workflow Pattern

3. Dynamic Table Pattern

4. Responsive Layout Pattern

5. Loading State Pattern

6. Tab Navigation Pattern

Theming & Customization

CSS Variables

Custom Theme Example

Component Customization

net9.0

NuGet packages

GitHub repositories