search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
63.76k stars 3.6k forks source link

Create a Tour component #999

Open MarkLyck opened 11 months ago

MarkLyck commented 11 months ago

It would be great if ShadCN UI had a Tour component.

I'm currently using this from ant.design, but it doesn't fit in great: https://ant.design/components/tour and one major downside is that the footer isn't customizable.

jocarrd commented 11 months ago

Nice, I leave this library here too https://driverjs.com/

noudadrichem commented 3 weeks ago

This would be lovely to have!

buzzie-bee commented 2 weeks ago

I've been investigating tour libraries and possible solutions and thought I would post some of my findings here in case others find it useful.

The package react-joyride seems to be very popular and is actively developed. They have the ability to create custom components for the elements, so shadcn components for the "beacon" and "tooltip" could be good and it leverages existing step logic without having to recreate all of that logic from scratch.

https://docs.react-joyride.com/custom-components

Onborda is also something worth keeping an eye on. It advertises using shadcn and tailwind for components, but the docs link doesn't work for me so I'm not sure if it's production ready yet or if it's still in active development.

https://github.com/uixmat/onborda

Providing just the components and letting users create their own context providers could work but it's a lot more effort for shadcn users to implement. Someone over on the radix github has a code sandbox where they used radix popovers to create the tour element, but it's lacking the 'step' state and things like 'next', 'previous', buttons etc.

https://github.com/radix-ui/primitives/discussions/1199

Many of the tour packages only let you customise the components via css or injected styles via props. A fully headless provider for managing the steps would be much more 'shadcn' style though. I haven't had much luck tracking one down that's actively maintained and feature complete. Please let me know if you can recommend one.

pertinate commented 1 week ago

I wrote this out a while ago: https://github.com/shadcn-ui/ui/pull/3780 Feel free to use it or let me know of ways to make it better.