1. 01

   Install the brain

   Reference the Navius.Primitives package, the headless primitives and their JavaScript engine. The engine asset is served automatically from the package's static web assets at _content/Navius.Primitives/navius-interop.js.

   Terminal bash

   dotnet add package Navius.Primitives --prerelease

2. 02

   Register the services

   In Program.cs, call AddNavius() to register the portal registry and the toast queue.

   Program.cs csharp

   builder.Services.AddNavius();

3. 03

   Mount the outlets

   Near your app root, mount a single portal outlet (for overlays that teleport out of clipping ancestors) and, if you use toasts, a manager-driven toast provider + viewport region.

   Routes.razor / App.razor razor

   <NaviusPortalOutlet />
   
   @* If you use toasts, mount a provider + viewport region: *@
   <NaviusToastProvider Manager="@Toasts">
       <NaviusToastViewport />
   </NaviusToastProvider>

4. 04

   Bring your own styles

   The brain ships no CSS. Style the primitives however you like (Tailwind utilities, plain CSS, CSS modules) keyed off the data-* contract. See Styling. Prefer a ready-made styled layer? Use zits/ui.

   CSS css

   .my-switch { background: #d4d4d8; border-radius: 9999px; }
   .my-switch[data-checked] { background: #18181b; }

5. 05

   Use a primitive

   Add a @using for the component's namespace and compose it from its parts.

   Counter.razor razor

   @using Navius.Primitives.Components.Switch
   
   <NaviusSwitch @bind-Checked="_on" class="my-switch">
       <NaviusSwitchThumb class="my-thumb" />
   </NaviusSwitch>
   
   @code { private bool _on; }

That's it: browse the components, or read how the engine works.