Headless UI

When the default card is not what you want, replace it. The library still owns the popover element, so measurement, collision-aware placement, focus management and dialog semantics keep working; you own everything inside it.

A card the library did not draw

Rendered by this page, not by the library

Active projects

Usage this month

68%

Team members

Three levels of customisation

Level	How	Use it when
Restyle	`--bit-bonboarding-*` custom properties	The layout is right, the colours are not.
Recompose	`BonboardingStepDefinition.Header`, `.Body`, `.Footer`	One step needs a form, an image or a different set of buttons.
Replace	`BonboardingRoot.ChildContent`, or a tour or step `Template`	The card should look nothing like the default.

A per-step body

The second step of the tour above renders a form inside the popover and disables its own Next button until the form is filled in. It is ordinary Razor.

<BonboardingRoot Unstyled="true" PopoverClass="my-card">
    <ChildContent>
        <h2>@context.Title</h2>
        <p>@context.Description</p>
        <button @onclick="context.PreviousAsync">@context.PreviousLabel</button>
        <button @onclick="context.NextAsync">@context.NextLabel</button>
    </ChildContent>
</BonboardingRoot>

@* Or just one step, leaving the rest of the tour on the default chrome: *@
<BonboardingStep Anchor="plan" Title="Choose a plan">
    <MyPlanPicker OnPicked="context.NextAsync" />
</BonboardingStep>