Getting Started

Get Blazor Power Tools up and running in your project in just a few minutes.

Home / Getting Started

Quick Start Guide

This guide walks you through installing Blazor Power Tools, configuring your project, and rendering your first component. By the end you will have a working BPT setup ready for development.

1

Prerequisites

Blazor Power Tools targets .NET 10. Make sure you have the SDK installed:

dotnet --version # Should return 10.0.x or later

You need a Blazor project — either Server, WebAssembly, or the hybrid template. If you don't have one yet:

dotnet new blazor -n MyApp cd MyApp
2

Install the NuGet Package

Add the Blazor Power Tools package to your project:

dotnet add package BlazorPowerTools

Or add it to your .csproj file directly:

<PackageReference Include="BlazorPowerTools" Version="*" />
Using a private NuGet feed? If your organization uses a private NuGet feed for Blazor Power Tools, see NuGet Feed Setup for configuration instructions.
3

Register Services

In your Program.cs, register the BPT services:

using Bpt.Components; var builder = WebApplication.CreateBuilder(args); // Add Blazor Power Tools services builder.Services.AddBlazorPowerTools(); // ... rest of your setup var app = builder.Build(); app.Run();
4

Add the Root Component

Wrap your layout body with <BptRootComponent>. This provides the cascading state, license validation, and JavaScript interop context that BPT components need.

In your MainLayout.razor (or base layout):

<BptRootComponent> @Body </BptRootComponent>
5

Add the Namespace Import

Add the BPT namespace to your _Imports.razor so components are available everywhere:

@using Bpt.Components @using Bpt.Components.Controls
6

Use Your First Component

You're ready! Add a BPT component to any page:

<BptDateSelector @bind-Value="selectedDate" Label="Pick a date" /> @code { private DateTime? selectedDate; }

Run your app and you should see the styled date picker:

dotnet run
Tip Explore the live component demos to see every component in action with code examples you can copy directly into your project.

Next Steps

An unhandled error has occurred. Reload 🗙

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.