[Feature]: Add onboarding component

alamenai commented 3 weeks ago

Feature description

First, thank you for your amazing work on this project! It has been incredibly helpful.

I would like to request a new feature:

An Onboarding Component.

This component would be highly beneficial for new users who are interacting with a platform for the first time.

The onboarding component should guide users through the initial steps of using the application, highlighting key features and functionalities.

Features:

Step-by-Step Guidance:

[x] Allow developers to create a sequence of steps that guide users through the application's key features.
[x] Include options for both modal and tooltip styles.

Customizable Steps:

[x] Developers should be able to customize each step with text, images, or videos.
[x] Provide options to customize the look and feel to match the application's theme.

Progress Indicators:

[x] Show users their progress through the onboarding process with visual indicators.
[x ] Include the ability to skip or revisit previous steps.

Interactive Elements:

[x] Highlight interactive elements on the page (e.g., buttons, forms) as part of the onboarding process.
[x] Allow users to interact with these elements without exiting the onboarding flow.

Responsive Design:

-[x] Ensure the component is fully responsive and works seamlessly on both desktop and mobile devices.

Implementation Suggestion:

To streamline the development of this feature, we could leverage the existing popover component.

By utilizing the popover component, we can create an onboarding flow that seamlessly integrates with the current design system and functionality, ensuring consistency and ease of implementation.

Benefits:

[x] Enhances user experience by providing clear guidance for new users.
[x] Reduces the learning curve for complex applications.
[x] Helps in user retention by ensuring users understand how to use key features.

I believe this feature would add great value to the project and greatly benefit its users. Thank you for considering this request.

Example

Affected component/components

Popover

Additional Context

Additional details here...

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues and PRs

Friendly request

I would join you as a collaborator to this project. Please, let me know if you can invite me.

gaurangrshah commented 3 weeks ago

Hey @alamenai, this is a great idea. Would love to discuss further, please feel free to join our discord and reference his issue https://github.com/BelkacemYerfa/shadcn-extension/issues/58. So that everyone is on the same page. We look forward to seeing you in the discord and thanks again!

alamenai commented 3 weeks ago

Hi @gaurangrshah , please could you share the discord link?

gaurangrshah commented 3 weeks ago

Hi @gaurangrshah , please could you share the discord link?

So sorry about that: https://discord.gg/aKcVrshP

BelkacemYerfa / shadcn-extension