uixmat / onborda Goto Github PK
View Code? Open in Web Editor NEWAn onboarding wizard flow for Next.js powered by framer motion
Home Page: https://onborda.dev
onborda's People
Contributors
Stargazers
Watchers
onborda's Issues
Custom card unclickable (click applies to content behind the card)
Removing pointer-events-none from:
<motion.div
data-name="onborda-overlay"
className="absolute inset-0 z-[995] pointer-events-none"
initial="hidden"
animate={isOnbordaVisible ? "visible" : "hidden"} // TODO: if hidden, reduce zIndex
variants={variants}
transition={{ duration: 0.5 }}
>
Fixes the issue and the card works properly again.
Multiple Onboarding?
Provide documentation for onboarda adopters
I've been researching possible packages to use for some tours I want to build into my nextjs app using shadcn/ui, tailwind, and framer motion.
This project looks like it could be a perfect fit! However there doesn't seem to be any documentation into it yet.
It looks like it's a pretty new project, so it's probably just on the roadmap for the future, but without documentation it's difficult to justify adopting the lib. I saw a comment that a v2 is being worked on, so I figured opening this ticket would help track the request for documentation so it can possibly be included with that v2.
I think there's a really strong case for a more 'headless' tour package which lets users implement their own components and styling and/or uses some prebuilt copy paste shadcn style components so I'm looking forward to seeing where this project goes :)
Wrong step after navigating back. Incorrect positioning after navigating forward
I'm not sure if this could be improved but I noticed a weird behavior in the demo website
- When navigating back, it highlights the first step always, then move to the last step in that route.
- When navigating forward, as the site was scrolled in the first page, then it will need scrolling up to position the step correctly
Pretty cool project nonetheless 🙌
Shot.2024-06-05.at.10.17.36.mp4
Multiple Onboarding/ Sections?
I think the idea is very nice! 👏
It would be cool to have the possibility to use multiple types of onboarding, for example by dividing them into sections.
If you think it is a feature worth adding I am willing to contribute to the repo.
Overlay not visible on the DOM
I tried using the library to create a basic onboarding tour on my app. The onborda-overlay element is not visible on my web page, I can't even see it on my DOM when I try inspect element. Even though I see the wrapper div and the onborda-site div. I tried to reproduce it on the basic template of create-next-app.
I followed the basic instruction on the README.md
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Onborda, OnbordaProvider, Step } from "onborda";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
const onbordaSteps: Step[] = [
{
icon: <>👋</>,
title: "Step 1",
content: <>This is the first step</>,
selector: "#onborda-step1",
side: "top",
showControls: true,
pointerPadding: 10,
pointerRadius: 10,
},
{
icon: <>👋</>,
title: "Step 2",
content: <>This is the second step</>,
selector: "#onborda-step2",
side: "bottom",
showControls: true,
pointerPadding: 10,
pointerRadius: 10,
},
];
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<OnbordaProvider>
<Onborda steps={onbordaSteps}>
{children}
</Onborda>
</OnbordaProvider>
</body>
</html>
);
}If I'm doing something wrong can you help me understand this
{
"name": "onborda",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "14.2.3",
"onborda": "1.2.2",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"eslint": "^8",
"eslint-config-next": "14.2.3"
}
}
Operating System: macOS M1 14.5
Node.js Version: 20.10.0
navigation between routes isn't stable due to timeout too low
solved: the timeout is too low
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.