Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kritan560/shadcn-onborda-nextjs

On-boarding using Next.JS and React Joyride. This package helps you to understand how you can implement the React Joyride into your Next.JS project. You can still leverage the benefits of server component while using React Joyride that need client component.
https://github.com/kritan560/shadcn-onborda-nextjs

nextjs14 react-joyride zustand

Last synced: 3 months ago
JSON representation

Host: GitHub
URL: https://github.com/kritan560/shadcn-onborda-nextjs
Owner: kritan560
Created: 2024-08-22T13:57:44.000Z (5 months ago)
Default Branch: main
Last Pushed: 2024-08-25T01:42:23.000Z (5 months ago)
Last Synced: 2024-10-01T00:42:05.779Z (4 months ago)
Topics: nextjs14, react-joyride, zustand
Language: TypeScript
Homepage:
Size: 413 KB
Stars: 2
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

## Getting Started

Clone the project,

```bash
# install the necessary modules
bun install
# or
npm install
```

Run the development server:

```bash
npm run dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Learn More

**onboarding.tsx**

- The main place where steps and logic are defined
- If not suffice your query you can change the logic here

**onboarding-start-button.tsx**

- The button which is used to start the onBoarding process manually

**onboarding-target-rendered.tsx**

- The component that is used to trigger onboarding for multi routes.
- This component is only needed if you are using multiple routes.
- Every multiple onboarding route needs to have this component to render the tooltip.

**onboarding-store.ts**

- The global store that stores global values of onboarding

> [!NOTE]
> Checkout the above mentioned component to understand more about what it does.