Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/code-with-onye/tourbit-cli
A customizable, interactive guide designed to introduce users to key features of your web application
https://github.com/code-with-onye/tourbit-cli
nextjs react shadcn-ui
Last synced: 3 days ago
JSON representation
A customizable, interactive guide designed to introduce users to key features of your web application
- Host: GitHub
- URL: https://github.com/code-with-onye/tourbit-cli
- Owner: code-with-onye
- Created: 2024-09-15T23:51:07.000Z (20 days ago)
- Default Branch: main
- Last Pushed: 2024-09-21T20:42:57.000Z (14 days ago)
- Last Synced: 2024-09-21T21:28:41.986Z (14 days ago)
- Topics: nextjs, react, shadcn-ui
- Language: TypeScript
- Homepage:
- Size: 8.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tourbit
Many applications struggle with effective user onboarding and feature discovery. Static tutorials or extensive documentation often fail to engage users, leading to poor feature adoption.
Tourbit is a customizable, interactive guide designed to introduce users to key features of your web application.
Built with React and TypeScript, it creates an engaging onboarding experience by guiding users through your app's functionality step-by-step.
- Providing an interactive, guided tour of your application's key features
- Highlighting specific elements on the page to draw user attention
- Offering a step-by-step approach that doesn't overwhelm users
- Allowing users to explore the application while learning about its features
## Features
1. **Interactive Popup**: A sleek, animated popup that moves through your webpage, explaining features.
2. **Progress Tracking**: Shows users their current position in the tour (e.g., "Step 2 of 5").
3. **Customizable Styles**: Easy styling customization to match your application's design.
4. **Keyboard Navigation**: Supports navigation using arrow keys and closing with the Escape key.
5. **Element Highlighting**: Draws attention to the current feature with an overlay effect.
6. **Responsive Positioning**: Adjusts the popup's position to ensure visibility on all screen sizes.
7. **Progress Persistence**: Saves the user's progress, allowing them to resume the tour later.
8. **Accessibility**: Designed with accessibility in mind, ensuring all users can benefit from the tour.
## Use Case Example
Here's how you can implement tourbit in a React application:
```shell
npx tourbit init
```
```tsx
import React, { useState } from "react";
import FeatureTour from "./FeatureTour";
const App: React.FC = () => {
const [showTour, setShowTour] = useState(true);
const tourSteps = [
{
selector: "#dashboard",
title: "Dashboard Overview",
content:
"Welcome to your personalized dashboard. Here you can see all your key metrics at a glance.",
},
{
selector: "#data-visualization",
title: "Data Visualization",
content:
"This chart shows your performance trends over time. Click on any data point for more details.",
},
{
selector: "#quick-actions",
title: "Quick Actions",
content:
"Use these buttons to quickly add new entries, generate reports, or adjust your settings.",
},
];
return (
My Awesome App
{/* Dashboard content */}
{/* Data visualization content */}
{/* Quick action buttons */}
{showTour && (
setShowTour(false)}
customStyles={{ backgroundColor: "#f0f4f8" }}
persistKey="my-app-onboarding-tour"
/>
)}
);
};
export default App;
```
In this example, the tourbit component guides new users through the main sections of a dashboard application. It highlights the dashboard overview, explains the data visualization feature, and introduces the quick action buttons. This approach helps users quickly understand the app's core functionality, potentially increasing engagement and user satisfaction.