GuideFlow 1.0.1
dotnet add package GuideFlow --version 1.0.1
NuGet\Install-Package GuideFlow -Version 1.0.1
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="GuideFlow" Version="1.0.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="GuideFlow" Version="1.0.1" />
<PackageReference Include="GuideFlow" />
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add GuideFlow --version 1.0.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: GuideFlow, 1.0.1"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package GuideFlow@1.0.1
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=GuideFlow&version=1.0.1
#tool nuget:?package=GuideFlow&version=1.0.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
GuideFlow
Accessible, animated guided tour component library for Blazor.
- 🎯 Target any element with a CSS-selector cutout overlay
- ⌨️ Keyboard navigation (arrows, Enter, Escape, Tab)
- ♿ ARIA attributes, focus trapping, screen reader support
- 🎨 Themable via CSS custom properties
- ✨ Smooth animated transitions and cutout
- 📍 Auto-flip, viewport-aware positioning
- 💾 Optional localStorage state persistence
- ✂️ IL trimming compatible (Blazor WASM ready)
- 📦 Zero external JS dependencies
Install
dotnet add package GuideFlow
Usage
Program.cs
builder.Services.AddGuideFlow();
_Imports.razor
@using GuideFlow.Components
@using GuideFlow.Enums
@using GuideFlow.Models
Component
<button @onclick="StartTour">Start Tour</button>
<div id="section-a">...</div>
<div id="section-b">...</div>
<GuideFlowTour @ref="tour" TourOptions="options">
<GuideFlowStep Selector="#section-a" Title="Step 1" Order="0" Placement="Placement.Bottom">
<p>Highlights section A.</p>
</GuideFlowStep>
<GuideFlowStep Selector="#section-b" Title="Step 2" Order="1" Placement="Placement.Right">
<p>Highlights section B.</p>
</GuideFlowStep>
</GuideFlowTour>
@code {
private GuideFlowTour? tour;
private TourOptions options = new() { Overlay = true, ShowProgress = true };
private async Task StartTour() => await tour!.StartAsync();
}
Documentation
Full docs - options, step parameters, events, theming, keyboard shortcuts:
👉 https://miraclefoundation.github.io/GuideFlow
Contributing
PRs welcome! See open pull requests.
License
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 was computed. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.27)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.