ui icon indicating copy to clipboard operation
ui copied to clipboard

[feat]: Onboarding component

Open alamenai opened this issue 1 year ago • 1 comments

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

image

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

alamenai avatar Jun 06 '24 15:06 alamenai

Wouldn't this fall more under an example category like the ones we have here?

Each onboarding has different nuances exclusive to each application, it would be hard to abstract a component out of it.

Nilomiranda avatar Jun 13 '24 03:06 Nilomiranda

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

shadcn avatar Jul 06 '24 23:07 shadcn

Agree with @alamenai !!!

mgrabina avatar Nov 21 '24 15:11 mgrabina