GuideFlow

KO | EN

gitlite — search

#python #golang #php #tensorflow #javascript #python3 #nodejs #security #redis #prometheus-exporter #nlp #alpine

★ 30 Open GitHub ↗

Blazor product tours, onboarding flows, feature highlights, and guided walkthroughs inspired by Driver.js.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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

```bash
dotnet add package GuideFlow
```

## Usage

**Program.cs**
```csharp
builder.Services.AddGuideFlow();
```

**_Imports.razor**
```razor
@using GuideFlow.Components
@using GuideFlow.Enums
@using GuideFlow.Models
```

**Component**
```razor
<button @onclick="StartTour">Start Tour</button>

<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](https://miraclefoundation.github.io/GuideFlow)

## Contributing

PRs welcome! See [open pull requests](https://github.com/MiracleFoundation/GuideFlow/pulls).

## License

[MIT](LICENSE.txt)

GuideFlow

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README