Installation Guide

This guide will help you install and set up the Bosui component pack in your .NET projects. Bosui supports both Blazor Server and .NET MAUI Blazor applications.

Prerequisites

.NET 9 or later
Visual Studio 2022 or Visual Studio Code
Blazor Server or .NET MAUI Blazor project

Package Installation

Install the Bosui NuGet package using one of the following methods:

Package Manager Console

Install-Package Bosui

.NET CLI

dotnet add package Bosui

PackageReference

Add the following to your project file (.csproj):

<PackageReference Include="Bosui" Version="1.0.0" />

Service Registration

Blazor Server (Program.cs)

using Bosui.Extensions;

var builder = WebApplication.CreateBuilder(args);

// Add Razor Components
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// Add Bosui services
builder.Services.AddBosuiComponents();

var app = builder.Build();

// Configure pipeline
app.UseAntiforgery();
app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

.NET MAUI Blazor (MauiProgram.cs)

using Bosui.Extensions;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();
        
        // Add Bosui services
        builder.Services.AddBosuiComponents();

        return builder.Build();
    }
}

Import Statements

Add the necessary using statements to your _Imports.razor file:

@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using Bosui.Services

CSS and JavaScript Files

Include the required CSS and JavaScript files in your application.

Blazor Server (App.razor or _Layout.cshtml)

<!-- In the <head> section -->
<link href="_content/Bosui/bosui.css" rel="stylesheet" />
<link href="_content/Bosui/bosui-icons.css" rel="stylesheet" />
<link href="_content/Bosui/bosui-text.css" rel="stylesheet" />
<link href="_content/Bosui/themes/default-theme.css" rel="stylesheet" />

<!-- Before closing </body> tag -->
<script src="_content/Bosui/bosui.js"></script>

.NET MAUI Blazor (index.html)

<!-- In the <head> section -->
<link href="_content/Bosui/bosui.css" rel="stylesheet" />
<link href="_content/Bosui/bosui-icons.css" rel="stylesheet" />
<link href="_content/Bosui/bosui-text.css" rel="stylesheet" />
<link href="_content/Bosui/themes/default-theme.css" rel="stylesheet" />

<!-- Before closing </body> tag -->
<script src="_content/Bosui/bosui.js"></script>

Theme Configuration (Optional)

Bosui includes multiple themes. You can switch between them or create custom themes.

Available Themes

default-theme.css - Light theme (default)
dark-theme.css - Dark theme

Using Theme Service

@inject ThemeService ThemeService

<BosuiButton OnClick="() => ThemeService.SetTheme('dark')">
    Switch to Dark Theme
</BosuiButton>

First Component

You're now ready to use Bosui components! Here's a simple example:

@page "/"

<BosuiStack FlexDirection="FlexDirection.Column" Gap="1rem">
    <BosuiCard>
        <BosuiBody>
            <h3>Welcome to Bosui!</h3>
            <p>Your component library is ready to use.</p>
        </BosuiBody>
    </BosuiCard>
    
    <BosuiButton Variant="ButtonVariant.Primary">
        Get Started
    </BosuiButton>
</BosuiStack>

Verification

To verify your installation is working correctly:

Build your project to ensure no compilation errors
Run your application
Check that Bosui styles are applied correctly
Test interactive components like buttons and inputs

Troubleshooting

Common Issues

Styles not loading: Ensure CSS files are properly referenced and accessible
JavaScript errors: Check that bosui.js is loaded before any Bosui components render
Service registration errors: Verify that AddBosuiComponents() is called in your startup
Import errors: Make sure using statements are added to _Imports.razor

Next Steps

Now that you have Bosui installed, explore the available components:

Button Component - Interactive buttons with various styles
Input Component - Form inputs with validation
Card Component - Content containers
Grid Component - Responsive layout system
Color Picker - Advanced color selection

Support

Need help? Check out:

📖 Component Docs
🎨 Examples
❓ FAQ