P11 Blazor UI Library – Bootstrap 5.3 Components

Getting Started with P11 UI

The P11 UI library is a Blazor component toolkit that provides a rich set of UI elements and services, designed to be easily customized and extended. It is built on top of Bootstrap and offers a dynamic theming system for quick styling adjustments.

This page will guide you through the two primary ways to add the P11 UI library to your Blazor project and the necessary configuration steps to get up and running.

1. Installation

You can install the P11 UI library in one of two ways:

Option A: Install via NuGet

The easiest way to get started is by installing the NuGet package. Open your package manager console and run the following command:


Install-Package p11.UI

Alternatively, you can install it through the NuGet Package Manager UI in Visual Studio.

Option B: Clone the Repository for Development

If you plan to debug or modify the components, you can clone the P11 repository directly and reference the project in your solution. This gives you full access to the source code.


git clone https://github.com/p11-org/p11-blazor-ui.git

After cloning, add the p11 UI project to your solution and add a project reference from your main application project to the p11 UI project.

2. Required Configuration

Once the library is installed, you need to perform a few one-time setup steps to make the components and services available in your application.

Add the necessary services to your dependency injection container. This is typically done in the Program.cs file.

// In Program.cs / MAUIProgram.cs
builder.Services.AddScoped<IThemeService, ThemeService>();
builder.Services.AddScoped<IMessageBoxService, MessageBoxService>();
builder.Services.AddScoped<IToastService, ToastService>();

Add Components to your Layout

Place the core components in your application's main layout file (e.g., App.razor or MainLayout.razor) to ensure they are available globally.

// In Routes.razor
<Router AppAssembly="typeof(Layout.MainLayout).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

<P11Toast />
<P11MessageBox />
<P11ThemeStyle />

Add Namespace to _Imports.razor

To easily access the components and services without a full namespace, add the following lines to your global imports file:

// In _Imports.razor
@using p11.UI
@using p11.UI.Models
@using p11.UI.Services

Modify App.razor or index.html (for MAUI Blazor)

To easily access the components and services without a full namespace, add the following lines to your global imports file:

@*  In App.razor *@

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    @* CHANGE <link rel="stylesheet" href="_content/YOURPROJECT.Shared/bootstrap/bootstrap.min.css" />  <= deactivate or delete *@

    @* Here are some more links to CSS (e.g., app.css) *@

    @* NEW *@
    <link rel="stylesheet" href="@Assets["_content/p11/lib/bootstrap/dist/css/bootstrap.min.css"]" />
    <link rel="stylesheet" href="@Assets["_content/p11/lib/bootstrap-icons/css/bootstrap-icons.min.css"]" />
    <link rel="stylesheet" href="_content/p11/p11.css" />
    @* NEW*@

    <link rel="stylesheet" href="YOURPROJECT.Web.styles.css" />

    <link rel="icon" type="image/png" href="_content/YOURPROJECT.Shared/favicon.png" />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
                
    @* NEW *@
    <script src="_content/p11/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="_content/p11/p11.js"></script>
    @* NEW *@

    <script src="_framework/blazor.web.js"></script>
</body>

</html>

<!-- index.html (MAUI Blazor) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>YOURPROJECT</title>
    <base href="/" />
    <!-- CHANGE <link rel="stylesheet" href="_content/YOURPROJECT.Shared/bootstrap/bootstrap.min.css" />  <= deactivate or delete -->
    
    <!-- Here are some more links to CSS (e.g., app.css)  -->

    <!-- NEW -->
    <link rel="stylesheet" href="_content/p11/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="_content/p11/lib/bootstrap-icons/css/bootstrap-icons.min.css" />
    <link rel="stylesheet" href="_content/p11/p11.css" />
    <!-- NEW -->

    <link rel="stylesheet" href="YOURPROJECT.styles.css" />
    <link rel="icon" href="data:,">
</head>

<body>

    <div class="status-bar-safe-area"></div>

    <div id="app">Loading...</div>

    <!-- NEW -->
    <script src="_content/p11/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="_content/p11/p11.js"></script>
    <!-- NEW -->

    <script src="_framework/blazor.webview.js" autostart="false"></script>

</body>

</html>

Inject Services for Usage

Finally, inject the services into any component where you need to use them. Note: you do not need a service for the components, of course.

// In your .razor component or its code-behind
@inject p11.UI.Services.IThemeService ThemeService
@inject p11.UI.Services.IMessageBoxService MessageBoxService
@inject p11.UI.Services.IToastService ToastService

// ...or in Codebehind
[Inject]
private p11.UI.Services.IThemeService _themeService { get; set; } = default!;
[Inject]
private p11.UI.Services.IMessageBoxService _messageBoxService { get; set; } = default!;
[Inject]
private p11.UI.Services.IToastService _toastService { get; set; } = default!;