Skip to content

Repository files navigation

Blazor.WinOld

NuGet BlazorWinOld Nuget Package GitHub

A Blazor UI component library that brings back the nostalgic look and feel of classic Windows operating systems (DOS, Windows 3.1, 98, XP, 7 and 10). Create retro-styled web applications with authentic Windows UI components.

🪶 Lightweight the NuGet package is only ~300 KB.

Compatible with Blazor Server and Blazor WebAssembly

DEMO and DOCS : https://tossnet.github.io/Blazor-WinOld/

Blazor WinOld UI component library

Overview

BlazorWinOld provides a collection of Blazor components styled to match the iconic Windows interfaces from the late 90s and 2000s. Whether you're building a nostalgia-driven project or need that classic Windows aesthetic, this library delivers pixel-perfect components including buttons, message boxes, windows, tabs, and more.

💡 Already using a UI framework? No problem! BlazorWinOld is fully compatible alongside other UI libraries (MudBlazor, Radzen, Fluent UI…). You can adopt just the components you need, such as WinOldContextMenu or WinOldMessageBox, without any conflict.

Enregistrement.2026-04-02.151547.mp4

Installation

Install-Package BlazorWinOld

or

dotnet add package BlazorWinOld

For client-side and server-side Blazor - add script section (head section)

 <link href="_content/BlazorWinOld/css/blazorwinold.css" rel="stylesheet" />

In Program.cs add this line

builder.Services.AddWinOldComponents();

in _Imports.razor :

@using Blazor.WinOld
@using Blazor.WinOld.Components

and in the bottom of your MainLayout.razor add these lines (optional, only if you use MessageBox or InputBox)

<WinOldMessageBoxHost />  <!-- Only if you use MessageBox -->
<WinOldInputBoxHost />    <!-- Only if you use InputBox -->
<WinOldDialogHost /> <!-- Only if you use DialogBox -->

CSS utilities

blazorwinold.css also includes a set of layout utility classes (flexbox, grid, gap, responsive sm: / md: / lg: / xl: variants), all prefixed with wo- to avoid conflicts with other CSS frameworks. Nothing to declare:

<div class="wo-col sm:wo-row wo-gap-16">
    <div>Column 1</div>
    <div class="wo-col wo-gap-8">Column 2</div>
</div>

See the CSS Utilities page of the demo for the full list.

Application layout

WinOldAppShell lays out a classic application in your own MainLayout: menu, toolbar, side pane, content and status bar. Only the side pane and the content scroll. Its Appearance is inherited by the WinOldMenu, WinOldToolbar, WinOldNavPane and WinOldStatusBar placed inside, and it already renders the MessageBox / InputBox / Dialog hosts (IncludeHosts="false" if you declare them yourself):

@inherits LayoutComponentBase

<WinOldAppShell Appearance="Appearance.Win98">
    <Menu><WinOldMenu>...</WinOldMenu></Menu>
    <Toolbar><WinOldToolbar>...</WinOldToolbar></Toolbar>
    <SidePane><WinOldNavPane>...</WinOldNavPane></SidePane>
    <StatusBar><WinOldStatusBar>...</WinOldStatusBar></StatusBar>
    <ChildContent>@Body</ChildContent>
</WinOldAppShell>

A page can add its own toolbar or status bar with <SectionContent SectionName="@WinOldAppShell.ToolbarSection"> (or StatusBarSection). See the AppShell page of the demo.

Scrollbars

Each appearance has its own scrollbar style: scroll-win-dos, scroll-win-31, scroll-win-98, scroll-win-xp, scroll-win-7, scroll-win-10. Add the class to any scrollable element, or get it with Appearance.ToScrollbarClass():

<div class="@Appearance.Win98.ToScrollbarClass()" style="height: 100px; overflow: auto;">...</div>

For the whole page, put the class on <html> in index.html, or change it at runtime with await JS.SetScrollbarAppearanceAsync(Appearance.Win7); (IJSRuntime). Firefox only gets the colors. See the Scrollbar page of the demo.

Release Notes

📜 Full changelog

Fonts

This project uses the Ultimate Oldschool PC Font Pack by VileR (int10h.org).
Font used: WebPlus IBM VGA 8x14

Thanks

I used these repo for most of the css and icons:

OS emulator :

About

Blazor components are available in DOS, Windows 3.11, Windows 98, Windows XP, Windows 7 and Windows 10 desktop styles. They are compatible with .NET 10, 9 and 8 and higher versions of Blazor applications. Stand-alone styles compatible with other UI frameworks

Topics

Resources

Stars

16 stars

Watchers

1 watching

Forks

Used by

Contributors

Languages