A Blazor component for providing a ModalDialog that shows custom content in a popup modal window with a semi-transparent background.
License
—
Deps
4
Install Size
—
Vulns
✓ 0
Published
Mar 4, 2026
Get Started
$ dotnet add package D20Tek.BlazorComponents.ModalReadme
d20Tek Blazor-Components
Introduction
This package suite provides custom, resuable Blazor components. These components are easy to use right out of the box, so developers can focus on building their applications. To keep the libraries small and independent, we have a project and NuGet package for each component, so that developers can just include what they need (and a huge component library).
Supported components: Spinner, ContentSpinner, Timer, SpanTimer, CountdownTimer, ToggleSwitch, ModalDialog, ModalFormDialog, and MessageBox.
Installation
These libraries are in NuGet packages so they are easy to add to your project. To install these packages into your solution, you can use the Package Manager. In PM, please use the following commands:
PM > Install-Package D20Tek.BlazorComponents.Spinner -Version 1.10.6
PM > Install-Package D20Tek.BlazorComponents.Timer -Version 1.10.6
PM > Install-Package D20Tek.BlazorComponents.ToggleSwitch -Version 1.10.6
PM > Install-Package D20Tek.BlazorComponents.Modal -Version 1.10.6
To install in the Visual Studio UI, go to the Tools menu > "Manage NuGet Packages". Then search for D20Tek.BlazorComponents.Spinner and install it from there.
Read more about this release in our Release Notes.
Usage
Once you've installed the component NuGet package, you can start using it in your Blazor project. For this example we will use the Spinner component, but other components will follow the same usage pattern.
- You must add our namespace to your Blazor project's
_Imports.razorfile to make our types available to all of your pages/components.
@using D20Tek.BlazorComponents
- Place the component in your razor file (for example in your Index.Razor file):
<Spinner />
- Many components have additional parameters that you can call (see the component documentation for list of available parameters).
<Spinner Type=SpinType.Pulse Label="Loading..." />
- Further customization is available by defining your own CSS or styles on the component.
<Spinner Type=SpinType.Hourglass class="my-custom-spinner" style="color: red; height: 120px; width: 120px" />
- The ContentSpinner component allows you to spin any child content, like an image.
<ContentSpinner Size=Size.Medium>
<img src="./images/my-image.png" style="width: 100%; height: 100%" />
</ContentSpinner>
Component-Specific Setup
Some components require a one-time setup step in addition to the standard usage above.
ModalDialog / ModalFormDialog / MessageBox � These components use a static CSS file that must be linked in your app's wwwroot/index.html (Blazor WASM) or App.razor / _Host.cshtml (Blazor Server) inside the <head> tag:
<link href="_content/D20Tek.BlazorComponents.Modal/Modal.css" rel="stylesheet" />
Samples:
For more detailed examples on how to use the D20Tek.BlazorComponents libraries, please review the following samples:
- Sample - D20Tek.FullSample.Wasm See this sample app running live at https://components.d20tek.com.
Feedback
If you use these libraries and have any feedback, bugs, or suggestions, please file them in the Issues section of this repository.