RR.Blazor

Modern Blazor component library with 63 components, utility-first styling, and AI-optimized documentation.

🚀 Live Demo

Features

Zero Configuration - Works out-of-the-box with sensible defaults
63 Components - Complete UI toolkit from buttons to data grids
📊 Smart Table-Chart Integration - Tables as data sources for charts with real-time binding
⚡ Enterprise Virtualization - Handle 100k+ rows with RTableVirtualized and RVirtualList
🔍 Intelligent Search System - Built-in search with collapsible interface and role-based filtering
Smart Type Detection - Auto-detects generics, eliminating boilerplate
3,300+ Utilities - Comprehensive CSS utility classes
🌳 Tree-Shakeable CSS - Advanced optimization reduces bundle size by 87%+ (727KB→92KB)
Theme System - Light/dark modes with CSS variables
AI-Optimized - Machine-readable documentation for AI coding

Quick Start

1. Add as submodule

git submodule add https://github.com/RaRdq/RR.Blazor.git

2. Configure your project

<!-- In your .csproj file -->
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <!-- ... other configuration ... -->
  
  <ItemGroup>
    <ProjectReference Include="..\RR.Blazor\RR.Blazor.csproj" />
  </ItemGroup>
  
  <!-- Enable build-time code generation features -->
  <!-- This enables: Modal registry auto-discovery, CSS tree-shaking, validation, and more -->
  <Import Project="..\RR.Blazor\build\RR.Blazor.targets" />
</Project>

3. Register services

// Program.cs
var builder = WebApplication.CreateBuilder(args);

// REQUIRED for Blazor Server: Enable static web assets
builder.WebHost.UseStaticWebAssets();

// Register RR.Blazor services (includes modal system, templates, etc.)
builder.Services.AddRRBlazor();

For Blazor WebAssembly projects:

// Program.cs
builder.Services.AddRRBlazor();

3. Add CSS and JavaScript references

Choose the appropriate file based on your Blazor hosting model:

Blazor WebAssembly (WASM)

<!-- wwwroot/index.html -->
<head>
    <link href="_content/RR.Blazor/css/main.css" rel="stylesheet" />
</head>
<body>
    <script type="module" src="_content/RR.Blazor/js/rr-blazor.js"></script>
</body>

Blazor Server

<!-- Pages/_Host.cshtml or Pages/_Layout.cshtml -->
<head>
    <link href="_content/RR.Blazor/css/main.css" rel="stylesheet" />
</head>
<body>
    <script type="module" src="_content/RR.Blazor/js/rr-blazor.js"></script>
</body>

Blazor Web (Interactive Server/WASM)

<!-- Components/App.razor or layout components -->
<head>
    <link href="_content/RR.Blazor/css/main.css" rel="stylesheet" />
</head>
<body>
    <script type="module" src="_content/RR.Blazor/js/rr-blazor.js"></script>
</body>

4. Use RAppShell (Zero Hustle)

<!-- MainLayout.razor - Complete app shell with everything included -->
<RAppShell>
    @Body
</RAppShell>

That's it! RAppShell includes theme provider, portal-based modal system (with ModalProvider), toast container, intelligent search system, and styles.

Alternative: Manual Setup

<!-- _Imports.razor -->
@using RR.Blazor.Components
@using RR.Blazor.Enums

<!-- MainLayout.razor -->
<RThemeProvider>
    <RToastContainer />
    <ModalProvider />
    @Body
</RThemeProvider>

Usage Guide

🤖 AI Agent Integration

For AI agents (Claude, GPT-4, etc.), add a rule or manually refer to @RR.Blazor\_Documentation\RRAI.md for comprehensive component documentation, patterns, and AI-optimized examples.

Smart Components

<!-- Auto-detects User type from Items -->
<RDropdown Items="users" @bind-SelectedValue="selectedUser" />

<!-- Auto-detects model type -->
<RForm Model="user" OnValidSubmit="SaveUser" />

📊 Smart Data Tables & Chart Integration

Zero-Config Tables with Built-in Chart Integration:

<!-- Auto-generates columns, includes search, sorting, pagination -->
<RTable Items="@salesData" 
        Title="Sales Report"
        ShowChartButton="true"
        ShowSearch="true" />

<!-- High-performance virtualization for large datasets -->
<RTableVirtualized Items="@largeDataset" 
                   Height="600px"
                   ShowChartButton="true"
                   ExportEnabled="true" />

<!-- Smart chart that auto-detects best visualization -->
<RChart Data="@tableRef.FilteredData" 
        Title="Dynamic Analytics" />

Table-Chart Data Binding:

Tables automatically expose FilteredData property for chart binding
Real-time chart updates as table data changes
Built-in chart modal with one-click visualization
Smart chart type detection based on data structure

Professional UI Components

<RCard Title="Dashboard" Elevation="4" Class="pa-6">
    <RButton Text="Save Changes" 
             Icon="save" 
             IconPosition="IconPosition.Start"
             OnClick="HandleSave" />
</RCard>

<RTable Items="@employees" />  @* Zero configuration - auto-generates all columns! *@

Forms with Validation

<RForm Model="user" OnValidSubmit="SaveUser">
    <RTextInput @bind-value="user.Email" Type="email" Required />
    <RTextInput @bind-value="user.Password" Type="password" Required />
    <RButton Text="Register" Type="ButtonType.Submit" />
</RForm>

Toast Notifications

@inject IToastService ToastService

<RButton Text="Show Success" 
         OnClick="@(() => ToastService.ShowSuccess("Operation completed!"))" />

Responsive Images with Lazy Loading

<!-- Basic image with lazy loading and blur placeholder -->
<RImage Src="/api/products/123/image" 
        Alt="Product thumbnail"
        LazyLoading="true"
        ShowSkeleton="true" />

<!-- Advanced image with responsive sources -->
<RImage Src="/images/hero.jpg"
        Alt="Hero banner"
        Srcset="/images/hero-sm.jpg 640w, /images/hero-md.jpg 1024w, /images/hero-lg.jpg 1920w"
        Sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
        AspectRatio="16/9"
        ObjectFit="ObjectFit.Cover"
        Priority="true" />

<!-- Avatar with fallback -->
<RImage Src="@user.AvatarUrl"
        Alt="@user.Name"
        Variant="ImageVariant.Circle"
        Width="64"
        Height="64"
        ErrorSrc="/images/default-avatar.png" />

Modal System

RR.Blazor supports 4 modal usage patterns. Choose the right pattern for your use case:

Case 1: Service-Based Modals (Recommended)

Use ModalService for quick confirmations and info dialogs.

@inject IModalService ModalService

await ModalService.ShowConfirmationAsync("Are you sure?", "Delete Item", "Delete", "Cancel", VariantType.Error);

Case 2: Components with Internal RModal

Components that have their own <RModal> wrapper - use ModalService with ShowHeader=false.

await ModalService.ShowAsync(new ModalOptions {
    ComponentType = typeof(MyModalWithWrapper), 
    ShowHeader = false, ShowFooter = false
});

Case 3: Direct RModal Usage

Standalone modals with two-way binding, no ModalService needed.

<RModal @bind-Visible="showModal" Title="My Modal">
    <ChildContent>Modal content here</ChildContent>
</RModal>

Case 4: Pure Content Components

Content-only components used through ModalService (no internal RModal).

await ModalService.ShowAsync(new ModalOptions {
    ComponentType = typeof(UserFormContent),
    Title = "Edit User", Size = SizeType.Large
});

🔍 Intelligent Search System

RAppShell includes a built-in, role-aware search system with collapsible interface:

<!-- Automatic integration with RAppShell -->
<RAppShell SearchCollapsible="true">
    <!-- Search providers are registered automatically -->
    @Body
</RAppShell>

Search Features:

🎯 Universal Search: Searches across all registered data providers
🛡️ Role-Based Filtering: Results filtered by user permissions
⚡ Lightning Fast: Sub-2-second response times with intelligent caching
📱 Collapsible Interface: Expands on click, auto-collapses when empty
🧠 Smart Suggestions: Contextual results with relevance scoring

Search Provider Registration:

// Register custom search providers
public class MySearchProvider : ISearchProvider
{
    public string Name => "MyData";
    public int Priority => 10;
    
    public async Task<List<AppSearchResult>> SearchAsync(string query, CancellationToken cancellationToken = default)
    {
        // Your search implementation
        return await MyDataService.SearchAsync(query);
    }
}

// In your layout
@inject IAppSearchService AppSearchService

@code {
    protected override void OnInitialized()
    {
        AppSearchService.RegisterSearchProvider(new MySearchProvider());
    }
}

Component Categories

Category	Components	Examples
Core	11 components	RButton, RCard, RBadge, RAvatar, RChip, RDivider, RActionGroup, RHeaderCard
Forms	10 components	RForm, RTextInput, RCheckbox, RDatePicker, RRadio, RSelectField, RFileUpload, RToggle
Data	9 components	RTable, RTableVirtualized, RList, RVirtualList, RFilterBar, RCalendar, RColumn
Display	15 components	RChart, RAccordion, RTimeline, RStatsCard, RProgressBar, RMetric, REmptyState, RSkeleton, RImage
Feedback	10 components	RModal, RToastContainer, RConfirmationModal, RAlert, RTooltip, RErrorBoundary, RDetailModal
Navigation	4 components	RBreadcrumbs, RNavMenu, RTabs, RTabItem
Layout	4 components	RAppShell, RSection, RGrid, RContent
🔍 Search	Built-in system	Global search, role-based filtering, collapsible interface

Styling System

Utility Classes

<!-- Spacing (MudBlazor-inspired) -->
<div class="pa-6 ma-4">Padding 6, margin 4</div>

<!-- Layout -->
<div class="flex justify-center align-center gap-4">
<div class="grid grid-cols-1 grid-cols-md-3">

<!-- Visual Effects -->
<div class="elevation-4 glass-light rounded">
<div class="shadow-md hover:shadow-lg transition-all">

CSS Variables

/* Theme-aware colors */
--color-primary
--color-text-primary
--color-background-elevated

/* Semantic spacing */
--space-0 through --space-24

/* Effects */
--shadow-md, --shadow-lg
--gradient-subtle

Configuration

Basic Setup

// Everything enabled by default
builder.Services.AddRRBlazor();

Custom Configuration

builder.Services.AddRRBlazor(options => options
    .WithTheme(theme => {
        theme.Mode = ThemeMode.Dark;
        theme.PrimaryColor = "#0078D4";
    })
    .WithToasts(toast => {
        toast.Position = ToastPosition.BottomRight;
        toast.DefaultDuration = 6000;
    })
);

AI Integration

RR.Blazor includes AI-optimized documentation for seamless integration with AI coding assistants:

Components: rr-ai-components.json - 65 components with structured APIs
Styles: rr-ai-styles.json - 3,300+ utility classes with patterns

AI Prompt Example

Using RR.Blazor components, create a user management interface with:
- Search functionality using RTextInput
- Data display using RDataTable with elevation-2
- Action buttons using RButton Primary variant
- Professional styling with glass-light and pa-6 utilities

Performance

Virtual Scrolling: Built-in for large datasets
CSS Tree Shaking: 85%+ bundle size reduction (608KB → 86KB)

Advanced CSS Optimization

RR.Blazor includes intelligent CSS tree-shaking that dramatically reduces bundle sizes while preserving all functionality:

# Run CSS optimization
pwsh ./Scripts/TreeShakeOptimize.ps1

# Results: 85.9% size reduction
# Original: 608.7 KB → Optimized: 86.0 KB
# Components preserved: 1,556 styles
# Utilities preserved: 145 classes

Tree Shaking Configuration:

builder.Services.AddRRBlazor(options => options
    .DisableTreeShaking()  // Opt-out if needed
    .WithTreeShaking(ts => {
        ts.VerboseLogging = true;
        ts.OutputPath = "./wwwroot/css/optimized";
        ts.EnableCaching = true;
    })
);

Browser Support

Compatible with all modern browsers.

Documentation

Component Reference - Machine-readable component docs
Utility Classes - Complete styling reference
Modal System - Portal-based modal system guide
Contributing Guide - Development guidelines

🎨 Custom Theming

RR.Blazor includes a powerful theming system that allows complete visual customization through SCSS variables.

Quick Start

# Generate a theme template
pwsh RR.Blazor/Scripts/GenerateTheme.ps1 -ThemeName "my-brand"

// Register theme in Program.cs
builder.Services.AddRRBlazor(options =>
{
    options.WithCustomTheme("my-brand", "Themes/my-brand.scss");
});

<!-- Use your theme -->
<RThemeProvider Theme="my-brand">
    <Router AppAssembly="@typeof(App).Assembly">
        <!-- Your app content -->
    </Router>
</RThemeProvider>

Theme Examples

// Themes/corporate-theme.scss
:root[data-theme="corporate-theme"] {
  // Override existing themes (extends default/dark)
  --theme-primary: #003d82;        // Corporate blue
  --theme-surface: #ffffff;        // Clean white surfaces
  --theme-text: #172b4d;          // Professional text
  
  // Create entirely new theme
  --theme-canvas: linear-gradient(135deg, #f7f9fb 0%, #e8ecf1 100%);
  --theme-shadow-md: 0 4px 8px -2px rgba(9, 30, 66, 0.08);
  
  // Full customization - override any variable
  --radius-md: 8px;               // Border radius
  --space-4: 1.25rem;             // Spacing
  --font-family-primary: 'Inter'; // Typography
  --button-height: 48px;          // Component sizing
}

See Docs/THEMING.md for complete guide.

Contributing

Add as submodule to your working project
Create feature/fix branch for your changes
Commit and push to your branch
Open pull request to master - we'll squash merge after review

# In your project
git submodule add https://github.com/RaRdq/RR.Blazor.git
cd RR.Blazor
git checkout -b feature/my-new-component
# Make your changes
git add . && git commit -m "Add new super duper component"
git push origin feature/my-new-component
# Open PR to master on GitHub

See CONTRIBUTING.md.

Integration with AI Tools

Claude Code Instructions

# Add to Claude's context
Provide @RR.Blazor/wwwroot/rr-ai-components.json and @RR.Blazor/wwwroot/rr-ai-styles.json to Claude and ask:
"Update my Blazor project to use RR.Blazor unified smart components"

# For new projects
"Initialize a new Blazor project with RR.Blazor design system featuring smart type detection"

Custom AI Commands

/designer - Elite Frontend Architect with Plan-Implement-Reflect methodology
/rr-blazor-init - Initialize RR.Blazor in current project
/rr-blazor-upgrade - Upgrade components to latest patterns
/rr-blazor-theme - Configure theme and styling
/rr-blazor-component - Generate new component following patterns

Troubleshooting

Static Files Returning 404 Errors

Problem: CSS/JS files from _content/RR.Blazor/ return 404 errors

Solution for Blazor Server projects:

// Program.cs - Add this BEFORE builder.Build()
builder.WebHost.UseStaticWebAssets();

CSS should load from: http[s]://yourapp/_content/RR.Blazor/css/main.css
JS should load from: http[s]://yourapp/_content/RR.Blazor/js/rr-blazor.js

License

Dual License:

MIT License - Free for individuals and organizations <$5M revenue
Commercial License - $4,999 lifetime for enterprises ≥$5M revenue

See LICENSE for details.

Built for the Blazor community 💙

Name		Name	Last commit message	Last commit date
Latest commit History 227 Commits
.claude/commands		.claude/commands
.github		.github
Attributes		Attributes
Components		Components
Configuration		Configuration
Enums		Enums
Extensions		Extensions
Interfaces		Interfaces
Models		Models
Scripts		Scripts
ServiceSetup		ServiceSetup
Services		Services
Styles		Styles
Templates		Templates
TestPages		TestPages
Tests		Tests
Tools/Analyzers		Tools/Analyzers
Utilities		Utilities
_Documentation		_Documentation
build		build
wwwroot		wwwroot
.gitignore		.gitignore
CONTRIBUTING.md		CONTRIBUTING.md
Directory.Build.props		Directory.Build.props
LICENSE.md		LICENSE.md
README.md		README.md
RR.Blazor.csproj		RR.Blazor.csproj
_Imports.razor		_Imports.razor
rr-blazor.config.json		rr-blazor.config.json

License

RaRdq/RR.Blazor

Folders and files

Latest commit

History

Repository files navigation

RR.Blazor

🚀 Live Demo

Features

Quick Start

1. Add as submodule

2. Configure your project

3. Register services

3. Add CSS and JavaScript references

Blazor WebAssembly (WASM)

Blazor Server

Blazor Web (Interactive Server/WASM)

4. Use RAppShell (Zero Hustle)

Alternative: Manual Setup

Usage Guide

🤖 AI Agent Integration

Smart Components

📊 Smart Data Tables & Chart Integration

Professional UI Components

Forms with Validation

Toast Notifications

Responsive Images with Lazy Loading

Modal System

Case 1: Service-Based Modals (Recommended)

Case 2: Components with Internal RModal

Case 3: Direct RModal Usage

Case 4: Pure Content Components

🔍 Intelligent Search System

Component Categories

Styling System

Utility Classes

CSS Variables

Configuration

Basic Setup

Custom Configuration

AI Integration

AI Prompt Example

Performance

Advanced CSS Optimization

Browser Support

Documentation

🎨 Custom Theming

Quick Start

Theme Examples

Contributing

Integration with AI Tools

Claude Code Instructions

Custom AI Commands

Troubleshooting

Static Files Returning 404 Errors

License

About

Topics

Resources

License

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Languages

Packages