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
📝 Markdown View
A component that parses and renders markdown content as formatted HTML inline within your Blazor pages. Ideal for displaying documentation, notes, or user-generated content.
- Renders standard markdown syntax
- Safe HTML output
- Supports headings, lists, code blocks, and links
- Accepts markdown via a string parameter
🪟 Modal Dialog
A flexible modal overlay component for displaying content, confirmations, or alerts above the current page without navigating away.
- Configurable title and body content
- Open/close state via parameter or ref
- Backdrop click and Escape key dismissal
- Customizable footer actions
📋 Modal Form Dialog
A modal dialog variant designed to host Blazor forms. Manages form submission and cancellation within the overlay, keeping your page logic clean and separate.
- Wraps any EditForm content
- Submit and cancel callback events
- Integrates with Blazor validation
- Prevents backdrop dismissal on unsaved changes
💬 Message Box
A simple message box component for displaying alerts, confirmations, and notifications to users. Provides a clean interface for common dialog scenarios without complex setup.
- Predefined message types (Info, Warning, Error, Success, Question)
- Configurable button sets (OK, OK/Cancel, Yes/No, Yes/No/Cancel)
- Icon display based on message type
- Callback events for button clicks
- Simple MessageBoxService API for quick usage
🔽 Toggle Panel
A collapsible panel component that shows and hides its content when the header is clicked. Useful for FAQs, settings sections, or any content that benefits from progressive disclosure.
- Expand and collapse with a single click
- Configurable default open or closed state
- Customizable header and body content
- Smooth animated transition
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