Get started

Setup steps

1. Create a project
   Blazor Server, WebAssembly or Auto on .NET 10.
2. Install the package
   Add the NuGet package RayCraft.Blazor and accept the license (EULA) when asked.
3. Register the services
   Call AddRayCraft() in Program.cs, in the server and in the client project.
4. Link the styles and the script
   Add the style sheet and the script to your page. The library does not color the page body, so set the page colors with its tokens.
5. Choose a theme
   Set data-raycraft-theme on the html element as the starting theme, and switch it later with RayCraft.setTheme('light') or RayCraft.setTheme('dark'). The script restores the saved choice or the system theme.
6. Add your first control
   Add @using RayCraft.Blazor.Components to the page (not to _Imports in the default template, where NavMenu exists twice) and use the control like any Razor component. Interactive controls need an interactive render mode.
7. Dialogs and messages
   Only if you use dialogs or snackbars, place DialogHost and SnackbarHost once in your layout.

Open the documentation

dotnet add package RayCraft.Blazor

// Program.cs (server and client)
builder.Services.AddRayCraft();

<!-- App.razor -->
<html data-raycraft-theme="light">
<link rel="stylesheet" href="_content/RayCraft.Blazor/css/raycraft.css" />
<script src="_content/RayCraft.Blazor/raycraft.js"></script>

/* your own css */
body { background: var(--raycraft-bg); color: var(--raycraft-text); }

@* Counter.razor *@
@using RayCraft.Blazor.Components
@rendermode InteractiveServer

<Button OnClick="Increment">Clicked @count times</Button>

@code {
    private int count;
    private void Increment() => count++;
}