Blazor Component Libraries: Building Reusable UI

Razor Class Libraries (RCLs) allow you to share Blazor components across multiple apps. With .NET Core 3.1 and upcoming .NET 5, they now support including static assets (CSS, JS, images) inside the NuGet package. This guide builds a reusable “Modal” component library.

Project Structure

Create a new RCL project:

dotnet new razorclasslib -o MyCompany.Components --support-pages-and-views

Static Web Assets

Place CSS in the `wwwroot` folder of the library. It is automatically exposed to the consuming app at `_content/{LibraryName}/{Path}`.

<!-- Consuming App (index.html) -->
<link href="_content/MyCompany.Components/styles.css" rel="stylesheet" />

Building the Modal Component

<!-- Modal.razor -->
@if (IsVisible)
{
    <div class="modal-backdrop">
        <div class="modal-content">
            @ChildContent
            <button @onclick="Close">Close</button>
        </div>
    </div>
}

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public EventCallback OnClose { get; set; }
    
    public bool IsVisible { get; private set; }
    
    public void Open() => IsVisible = true;
    public void Close()
    {
        IsVisible = false;
        OnClose.InvokeAsync(null);
    }
}

Key Takeaways

• RCLs are the standard for sharing UI.
• Static assets are bundled automatically; no webpack required.
• Use `EventCallback` for child-to-parent communication.