{"repo":"NiazMorshed2007/shadcn-tour","free":true,"listed":false,"github":"https://github.com/NiazMorshed2007/shadcn-tour","clone":"git clone https://github.com/NiazMorshed2007/shadcn-tour.git","description":null,"language":"TypeScript","stars":293,"topics":["shadcn-ui","tour"],"license":"MIT","category":"ui-components","readme_excerpt":"shadcn/tour A component to make product tours with motion and shadcn/ui. Key parts - TourProvider : A context provider to make the tour available to the app. - TourAlertDialog : An alert dialog component to begin the tour or skip it. - useTour : A hook about the tour which provides necessary functions and states. How to use? 1. First install the packages and necessary components by running the following command: It will add TourProvider , TourAlertDialog and useTour hook in your project under components/tour.tsx . Additionally, a sets of step ids will get added under lib/tour-constants.ts . Note: TOUR STEPS is the name of the constant that contains the step ids. A step id should be assigned to a selector that is used to highlight the step. It will calculate its position in the viewport and show the step beside it. 2. Next wrap your app with TourProvider in app/layout.tsx or somewhere else you wish. 3. Next use the setSteps from useTour hook to set the steps you want to highlight. And use the TourAlertDialog component to show the tour. 4. Remember to add the step ids to the selectors you want to highlight. Here is an example of how to do it: Multiple Named Tours You can register multiple tours and start them by ID using the tours prop on TourProvider : Then start a specific tour by ID: Note: The original setSteps + startTour() (no arguments) pattern continues to work for single-tour usage. Keyboard Navigation When a tour is active, users can navigate using the keyboard: - Arro","default_branch":null,"files":null,"tree":[],"storefront":"/r/NiazMorshed2007","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/NiazMorshed2007/shadcn-tour/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}