Blazwind.Components 0.0.4-alpha

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher.
This is a prerelease version of Blazwind.Components. 
dotnet add package Blazwind.Components --version 0.0.4-alpha
                    


                    

                
NuGet\Install-Package Blazwind.Components -Version 0.0.4-alpha
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="Blazwind.Components" Version="0.0.4-alpha" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Blazwind.Components" Version="0.0.4-alpha" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Blazwind.Components" />
                    


                            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 Blazwind.Components --version 0.0.4-alpha
                    


                    

                
#r "nuget: Blazwind.Components, 0.0.4-alpha"
#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 Blazwind.Components@0.0.4-alpha
#: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=Blazwind.Components&version=0.0.4-alpha&prerelease
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Blazwind.Components&version=0.0.4-alpha&prerelease
                    


                            Install as a Cake Tool

Blazwind Components

Blazwind is a modern, enterprise-grade Blazor component library built with Tailwind CSS. It focuses on aesthetics, performance, and developer experience.

Features

  • Blazwind.Components: Core UI components including:
    • Inputs (Text, Number, Date, Select, etc.)
    • Buttons & Icons
    • Cards & Panels
    • Layouts (Drawers, Modals)
    • DataGrid & Tables
    • Calendar & Charts Integration

Installation

Install the package via NuGet:

dotnet add package Blazwind.Components

Setup

2. Register Services

Add the following to your Program.cs:

builder.Services.AddBlazwind();

3. Style & Script References

Add the following to your App.razor (or index.html for WASM) within the <head> tag:


<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">


<link rel="stylesheet" href="_content/Blazwind.Components/blazwind.css"/>

Add the script reference just before the closing </body> tag:


<script src="_content/Blazwind.Components/blazwind.js"></script>

Note: Charts (ECharts) and Maps (MapLibre) components load their dependencies dynamically when used. Ensure you have an active internet connection for CDN resources.

4. Global Imports

Add the namespace to your _Imports.razor:

@using Blazwind.Components
@using Blazwind.Components.Layout
@using Blazwind.Components.Navigation
@using Blazwind.Components.Shared
@using Blazwind.Components.Button

4. Layout Configuration

Update your MainLayout.razor to include the necessary containers and the application shell. Blazwind is mobile-first and fully supports Dark Mode out of the box.

@inherits LayoutComponentBase


<BwDialogContainer />
<BwDrawerContainer />

<BwAppLayout>
    <Sidebar>
        <NavMenu />
    </Sidebar>
    
    <Header>
        <BwHeader>
            <LeftContent>
                <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-100">My App</h1>
            </LeftContent>
            <RightContent>
                
                <BwButton Icon="fa-regular fa-bell" Variant="BwVariant.Ghost" />
            </RightContent>
        </BwHeader>
    </Header>
    
    <ChildContent>
        @Body
    </ChildContent>
</BwAppLayout>

5. Navigation Menu

Create a NavMenu.razor component using the flexible BwNavMenu:

<BwNavMenu>
    <Header>
        <BwNavHeader Title="Blazwind" Subtitle="App" Icon="fa-solid fa-wind" />
    </Header>

    <Search>
        <BwNavSearch Placeholder="Search..." />
    </Search>

    <ChildContent>
        <BwNavMenuGroup Title="General" Icon="fa-solid fa-house" DefaultExpanded="true">
            <BwNavMenuItem Label="Home" Href="" Icon="fa-solid fa-home" Match="NavLinkMatch.All" />
            <BwNavMenuItem Label="Dashboard" Href="dashboard" Icon="fa-solid fa-chart-pie" />
        </BwNavMenuGroup>
        
        <BwNavMenuGroup Title="Settings" Icon="fa-solid fa-gear">
            <BwNavMenuItem Label="Profile" Href="profile" Icon="fa-regular fa-user" />
        </BwNavMenuGroup>
    </ChildContent>
</BwNavMenu>

Features

  • Mobile First: Designed with responsiveness at its core.
  • Dark Mode: Built-in support for light and dark themes.
  • Dynamic Loading: Heavy resources like Charts and Maps are loaded only when needed.
  • Tailwind CSS: Modern utility-first styling for maximum customization.

Example Usage

Here is a simple example of a page using Blazwind components:

@page "/example"
@inject DialogService DialogService

<BwCard Title="Welcome" Icon="fa-solid fa-star">
    <BwButton Text="Say Hello" OnClick="ShowHello" Color="BwColor.Primary" />
</BwCard>

@code {
    private async Task ShowHello()
    {
        await DialogService.ShowAlertAsync("Hello", "Welcome to Blazwind!");
    }
}
Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  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. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

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
0.0.4-alpha 40 1/22/2026