Blazor Components Library
A collection of reusable, customizable Blazor components designed to accelerate your web application development. Built with modern .NET and following best practices, these components help you create beautiful, responsive, and accessible user interfaces with minimal effort.
Overview
The d20Tek Blazor Components library provides a set of production-ready UI components that work seamlessly with both Blazor Server and Blazor WebAssembly applications. Each component is designed with flexibility in mind, offering extensive customization options while maintaining sensible defaults for quick implementation.
Whether you're building a dashboard, a data-driven application, or a consumer-facing website, these components provide the building blocks you need to create polished user experiences.
Key Features
- Framework Agnostic Styling — Works with Bootstrap, Tailwind, or custom CSS
- Accessibility First — WCAG 2.1 compliant with proper ARIA attributes
- Responsive Design — Mobile-friendly components that adapt to any screen size
- Dark Mode Support — Built-in theming for light and dark color schemes
- Minimal Dependencies — Lightweight with no heavy JavaScript frameworks required
- Full Documentation — Comprehensive examples and API documentation
Component Library
Explore the available components in our library:
⏳ Spinner
A simple animated loading spinner to indicate background processing or content loading. Lightweight and customizable with multiple size and color options.
- Multiple size presets (sm, md, lg)
- Customizable colors
- CSS-based animation
- Accessibility attributes included
📦 Content Spinner
A wrapper component that displays a loading spinner overlay while content is being loaded. Automatically shows/hides based on a loading state parameter.
- Wraps any child content
- Configurable loading state
- Optional overlay backdrop
- Smooth fade transitions
⏱️ Timer
A general-purpose timer component that counts up from zero, useful for tracking elapsed time in games, exercises, or productivity applications.
- Start, stop, and reset controls
- Configurable display format
- Event callbacks for timer events
- Precise millisecond tracking
📏 Span Timer
An inline timer component that renders as a span element, perfect for embedding time displays within text or other inline content.
- Inline display (no block layout)
- Customizable time format
- Lightweight and minimal styling
- Easy integration in sentences
⏰ Countdown Timer
A countdown component that counts down from a specified duration to zero. Ideal for timed quizzes, auctions, or any time-limited activities.
- Configurable start duration
- OnComplete callback event
- Visual warning at low time
- Pause and resume support
🔘 Toggle Switch
A modern on/off toggle switch component as an alternative to checkboxes. Provides clear visual feedback for binary settings and preferences.
- Two-way binding support
- Customizable on/off colors
- Optional label text
- Disabled state styling
Installation
Add the component library to your Blazor project via NuGet:
dotnet add package D20Tek.BlazorComponents
Then register the services in your Program.cs:
builder.Services.AddD20TekBlazorComponents();
And add the stylesheet to your App.razor or index.html:
<link href="_content/D20Tek.BlazorComponents/d20tek-components.css" rel="stylesheet" />
Browser Support
The component library supports all modern browsers:
| Browser | Minimum Version |
|---|---|
| Chrome | 90+ |
| Firefox | 88+ |
| Safari | 14+ |
| Edge | 90+ |
Explore the full documentation and live examples
View Component Sample