WireFrame.UI 4.0.0

WireFrameUI

A lightweight, flat-design Blazor component library for .NET 9+. Built with zero JavaScript dependencies and a focus on simplicity and performance.

Features

• 46+ Production-Ready Components - Complete UI toolkit for modern web applications
• Zero JavaScript - Pure CSS-driven components
• Strongly Typed - Full enum support for variants, sizes, and states
• Two-Way Binding - Complete @bind support across all form components
• Mobile-First - Touch-friendly with 44px minimum tap targets
• No Dependencies - Pure C# and CSS implementation
• Flat Design Philosophy - Inspired by technical engineering diagrams

Installation

Install via NuGet Package Manager:

dotnet add package WireFrame.UI

Or via Package Manager Console:

Install-Package WireFrame.UI

Icons Package (Optional)

For access to 400+ scalable vector icons across 23 categories:

dotnet add package WireFrame.UI.Icons

The icons package includes categories for Interface, Actions, Content, Communication, Media, System, Security, Users, Commerce, Time, Files, Data, Devices, Development, Admin, Weather, Travel, Health, Food, Sports, Education, Legal, and Brands.

Quick Start

1. Add the CSS reference to your index.html:

<link href="_content/WireFrame.UI/css/wireframe/bundle.min.css" rel="stylesheet" />

2. Add the namespace to your _Imports.razor:

@using WireFrame.UI
@using WireFrame.UI.Components

3. Start using components:

<WfContainer>
    <WfRow Gap="WfRow.GapSize.Medium">
        <WfColumn Span="12">
            <WfCard Title="Welcome" Accent="true">
                <p>Get started with WireFrameUI components!</p>
                <WfButton Variant="WfButton.ButtonVariant.Primary" Filled="true">
                    <WfIcon Category="WfIcon.IconCategory.Actions" Name="Save" Size="20" />
                    Click Me
                </WfButton>
            </WfCard>
        </WfColumn>
    </WfRow>
</WfContainer>

Demo

View the live demo at https://celticron-wireframe-d5a6axabh0bxgphc.westeurope-01.azurewebsites.net/

Component Categories

• Layout - Container, Row, Column
• Forms - Input, Textarea, Select, Checkbox, Radio, Switch, Range
• Buttons - Button, ButtonGroup
• Display - Card, Alert, Badge, Table, Skeleton
• Navigation - Navbar, Tabs, Breadcrumb, Dropdown, Accordion, Pagination
• Data Visualization - PieChart, BarChart, DoughnutChart
• Pickers - DatePicker, DateRangePicker, TimePicker, ColorPicker
• Overlays - Modal, Toast, Dialog
• Progress - Progress, Spinner
• Media - Carousel, Thumbnail components
• Icons - 400+ scalable vector icons in 23 categories
• Utilities - Divider, Link

Icon System

The optional WireFrame.UI.Icons package provides 400+ flat-design SVG icons with:

• 23 Categories - Interface, Actions, Content, Communication, Media, System, Security, Users, Commerce, Time, Files, Data, Devices, Development, Admin, Weather, Travel, Health, Food, Sports, Education, Legal, Brands
• Customizable Size and Color - Full control via component parameters
• Lightweight - Pure SVG markup with no dependencies
• Scalable - Vector-based icons that scale perfectly at any size

Example usage:

<WfIcon Category="WfIcon.IconCategory.Interface" Name="Home" Size="24" />
<WfIcon Category="WfIcon.IconCategory.Actions" Name="Edit" Color="var(--color-accent-blue)" />
<WfIcon Category="WfIcon.IconCategory.System" Name="Success" Color="var(--color-accent-green)" />

Documentation

Full documentation is available in the repository's Docs.md file, including detailed component APIs, parameters, examples, and best practices.

Design System

• Monochromatic Dark Theme - Clean dark backgrounds with selective color accents
• 2px Stroke Standard - Consistent borders and outlines
• Minimal Animation - Fast 100ms transitions only
• Technical Aesthetic - Engineering diagram-inspired visual style

Requirements

• .NET 9 SDK or later
• Blazor WebAssembly or Blazor Server
• Modern browser support

Browser Support

• Chrome, Firefox, Safari, Edge (latest versions)
• Mobile browsers (iOS Safari, Chrome Mobile)

License

See LICENSE file for details

Contact

Please contact info@coretravis.work.