Introduction to Osirion.Blazor

Osirion.Blazor is a comprehensive, modular component library designed to enhance Blazor applications with high-performance, SSR-compatible components. Built with a focus on modern web development practices, Osirion embraces progressive enhancement principles to ensure your applications work seamlessly across all Blazor hosting models.

Core Principles

Osirion.Blazor is built on five core principles:

1. SSR-First Development: All components are designed for Server-Side Rendering compatibility from the ground up
2. Minimal JavaScript Dependencies: Using JavaScript only when absolutely necessary
3. Progressive Enhancement: Core functionality works without JavaScript, enhanced when available
4. Modular Architecture: Use only what you need with independently packaged modules
5. Framework Integration: Seamless integration with popular CSS frameworks

Modules

Osirion.Blazor consists of several specialized modules that can be used independently or together:

Analytics

Implement analytics tracking in your Blazor applications with support for multiple providers:

• Microsoft Clarity
• Matomo
• Google Analytics 4
• Yandex Metrica

Key features:

• SSR-compatible tracking
• Provider pattern for extensibility
• Privacy-focused with consent management
• Configuration-driven setup

Learn more about Osirion.Blazor.Analytics →

Navigation

Enhance your application's navigation experience with:

• Smooth scrolling
• Scroll restoration for navigation
• "Back to top" functionality
• Enhanced navigation interception

Key features:

• Zero JavaScript for core functionality
• Customizable through CSS variables
• Respects reduced motion preferences
• Works with all Blazor hosting models

Learn more about Osirion.Blazor.Navigation →

Content Management

Build content-driven websites with integrated CMS capabilities:

• Multiple content providers (GitHub, FileSystem)
• Markdown rendering with frontmatter
• Content organization with tags and categories
• Directory-based navigation and search

Key features:

• Git-based content workflow
• SEO optimization built-in
• Provider pattern for custom sources
• Full-text search capabilities

Learn more about Osirion.Blazor.Cms →

Theming

Create consistent, themeable applications with:

• CSS framework integration
• Dark mode support
• CSS variables for theming
• Framework-specific adaptations

Key features:

• System preference detection
• User preference persistence
• Minimal JavaScript with progressive enhancement
• Integration with popular frameworks (Bootstrap, FluentUI, MudBlazor, Radzen)

Learn more about Osirion.Blazor.Theming →

Getting Started

Installation

Install the complete package:

dotnet add package Osirion.Blazor

Or just the modules you need:

dotnet add package Osirion.Blazor.Core
dotnet add package Osirion.Blazor.Analytics
dotnet add package Osirion.Blazor.Navigation
dotnet add package Osirion.Blazor.Cms
dotnet add package Osirion.Blazor.Theming

Basic Setup

Register all services at once:

// In Program.cs
using Osirion.Blazor.Extensions;

builder.Services.AddOsirionBlazor(osirion => {
    osirion
        .UseAnalytics(analytics => {
            analytics.AddClarity(options => {
                options.SiteId = "your-clarity-site-id";
            });
        })
        .UseNavigation(navigation => {
            navigation.AddScrollToTop();
            navigation.AddEnhancedNavigation();
        })
        .UseTheming(theming => {
            theming.UseFramework(CssFramework.Bootstrap);
            theming.EnableDarkMode();
        });
});

Or use configuration-based setup:

// Register from appsettings.json
builder.Services.AddOsirionBlazor(builder.Configuration);

With corresponding configuration:

Code block removed for security reasons

Using Components

Use Osirion components in your Blazor application:

@using Osirion.Blazor.Components

<ClarityTracker />
<EnhancedNavigation Behavior="ScrollBehavior.Smooth" />
<ScrollToTop Position="Position.BottomRight" />

<ThemeProvider Framework="CssFramework.Bootstrap">
    <ThemeToggle />
    
    <main>
        <ContentList Directory="blog" />
    </main>
</ThemeProvider>

Requirements

• .NET 8.0 or higher
• Blazor (Server, WebAssembly, or Auto)

Browser Support

Osirion.Blazor supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Progressive enhancement ensures functionality even in environments with limited JavaScript support.

Framework Integration

Osirion.Blazor integrates with popular CSS frameworks:

• Bootstrap 5+
• FluentUI for Blazor
• MudBlazor
• Radzen Blazor

Framework integration maps Osirion's CSS variables to the framework's native variables, ensuring consistent styling.

SSR Compatibility

All Osirion components are designed for Server-Side Rendering (SSR) compatibility:

• Static rendering for build-time generation
• Hydration for interactive enhancements
• Progressive enhancement for JavaScript availability

This ensures optimal performance and SEO benefits while maintaining rich interactivity.

Next Steps

• Explore the Analytics module →
• Learn about Navigation components →
• Discover CMS capabilities →
• Set up theming for your application →
• View examples and demos →
• Read the API reference →

Ready to enhance your Blazor applications? Let's get started!