{"id":13810178,"url":"https://github.com/uixmat/onborda","last_synced_at":"2025-05-15T15:04:37.961Z","repository":{"id":226045327,"uuid":"767591075","full_name":"uixmat/onborda","owner":"uixmat","description":"An onboarding wizard flow / product tour for Next.js animated by framer motion","archived":false,"fork":false,"pushed_at":"2024-12-22T16:15:32.000Z","size":171,"stargazers_count":1113,"open_issues_count":9,"forks_count":52,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-12T03:16:50.358Z","etag":null,"topics":["framer-motion","next","nextjs","onboarding","product","product-tour","product-tours","react","setup","tailwindcss","tour","wizard"],"latest_commit_sha":null,"homepage":"https://onborda.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uixmat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-03-05T15:12:47.000Z","updated_at":"2025-05-10T11:32:21.000Z","dependencies_parsed_at":"2024-09-01T01:50:49.145Z","dependency_job_id":"22a99b54-ec19-4cb4-a165-8aa3592c77b8","html_url":"https://github.com/uixmat/onborda","commit_stats":null,"previous_names":["uixmat/onborda"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uixmat%2Fonborda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uixmat%2Fonborda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uixmat%2Fonborda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uixmat%2Fonborda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uixmat","download_url":"https://codeload.github.com/uixmat/onborda/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254364270,"owners_count":22058878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framer-motion","next","nextjs","onboarding","product","product-tour","product-tours","react","setup","tailwindcss","tour","wizard"],"created_at":"2024-08-04T02:00:47.417Z","updated_at":"2025-05-15T15:04:37.939Z","avatar_url":"https://github.com/uixmat.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Libs and Components","Components","tailwindcss","Tools","Components \u0026 Libraries"],"sub_categories":[],"readme":"# Onborda - Next.js onboarding flow\nOnborda is a lightweight onboarding flow that utilises [framer-motion](https://www.framer.com/motion/) for animations and [tailwindcss](https://tailwindcss.com/) for styling. Fully customisable pointers (tooltips) that can easily be used with [shadcn/ui](https://ui.shadcn.com/) for modern web applications.\n\n- **Demo - [onborda.vercel.app](https://onborda.vercel.app)**\n- **[Demo repository](https://github.com/uixmat/onborda-demo)**\n\n\n## Getting started\n```bash\n# npm\nnpm i onborda\n# pnpm\npnpm add onborda\n# yarn\nyarn add onborda\n```\n\n### Global `layout.tsx`\n```tsx\n\u003cOnbordaProvider\u003e\n  \u003cOnborda steps={steps}\u003e\n    {children}\n  \u003c/Onborda\u003e\n \u003c/OnbordaProvider\u003e\n```\n\n### Components \u0026 `page.tsx`\nTarget anything in your app using the elements `id` attribute.\n```tsx\n\u003cdiv id=\"onborda-step1\"\u003eOnboard Step\u003c/div\u003e\n```\n\n### Tailwind config\nTailwind CSS will need to scan the node module in order to include the classes used. See [configuring source paths](https://tailwindcss.com/docs/content-configuration#configuring-source-paths) for more information about this topic.\n\n\u003e **Note** _You only require this if you're **not using** a custom component.\n\n```ts\nconst config: Config = {\n  content: [\n    './node_modules/onborda/dist/**/*.{js,ts,jsx,tsx}' // Add this\n  ]\n}\n```\n\n### Custom Card \nIf you require greater control over the card design or simply wish to create a totally custom component then you can do so easily.\n\n| Prop          | Type             | Description                                                          |\n|---------------|------------------|----------------------------------------------------------------------|\n| `step`         | `Object`          | The current `Step` object from your steps array, including content, title, etc.         |\n| `currentStep`   | `number`         | The index of the current step in the steps array.                    |\n| `totalSteps`    | `number`         | The total number of steps in the onboarding process.                 |\n| `nextStep`      |                  | A function to advance to the next step in the onboarding process.    |\n| `prevStep`      |                  | A function to go back to the previous step in the onboarding process.|\n| `arrow`         |                  | Returns an SVG object, the orientation is controlled by the steps side prop |\n\n```tsx\n\"use client\"\nimport type { CardComponentProps } from \"onborda\";\n\nexport const CustomCard = ({\n  step,\n  currentStep,\n  totalSteps,\n  nextStep,\n  prevStep,\n  arrow,\n}: CardComponentProps) =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{step.icon} {step.title}\u003c/h1\u003e\n      \u003ch2\u003e{currentStep} of {totalSteps}\u003c/h2\u003e\n      \u003cp\u003e{step.content}\u003c/p\u003e\n      \u003cbutton onClick={prevStep}\u003ePrevious\u003c/button\u003e\n      \u003cbutton onClick={nextStep}\u003eNext\u003c/button\u003e\n      {arrow}\n    \u003c/div\u003e\n  )\n}\n```\n\n### Steps object\nSteps have changed since Onborda v1.2.3 and now fully supports multiple \"tours\" so you have the option to create multple product tours should you need to! The original Step format remains but with some additional content as shown in the example below!\n\n```tsx\n{\n  tour: \"firstyour\",\n  steps: [\n    Step\n  ],\n  tour: \"secondtour\",\n  steps: [\n    Step\n  ]\n}\n```\n\n### Step object\n\n| Prop           | Type                          | Description                                                                           |\n|----------------|-------------------------------|---------------------------------------------------------------------------------------|\n| `icon`           | `React.ReactNode`, `string`, `null` | Optional. An icon or element to display alongside the step title.                                |\n| `title`          | `string`                        | The title of your step                     |\n| `content`        | `React.ReactNode`               | The main content or body of the step.                                                 |\n| `selector`       | `string`                        | A string used to target an `id` that this step refers to.            |\n| `side`           | `\"top\"`, `\"bottom\"`, `\"left\"`, `\"right\"` | Optional. Determines where the tooltip should appear relative to the selector.          |\n| `showControls`   | `boolean`                       | Optional. Determines whether control buttons (next, prev) should be shown if using the default card.           |\n| `pointerPadding` | `number`                        | Optional. The padding around the pointer (keyhole) highlighting the target element.             |\n| `pointerRadius`  | `number`                        | Optional. The border-radius of the pointer (keyhole) highlighting the target element.           |\n| `nextRoute`      | `string`                        | Optional. The route to navigate to using `next/navigation` when moving to the next step.                      |\n| `prevRoute`      | `string`                        | Optional. The route to navigate to using `next/navigation` when moving to the previous step.                  |\n\n\u003e **Note** _Both `nextRoute` and `prevRoute` have a `500`ms delay before setting the next step, a function will be added soon to control the delay in case your application loads slower than this._\n\n### Example `steps`\n\n```tsx\n{\n  tour: \"firsttour\",\n  steps: [\n    {\n      icon: \u003c\u003e👋\u003c/\u003e,\n      title: \"Tour 1, Step 1\",\n      content: \u003c\u003eFirst tour, first step\u003c/\u003e,\n      selector: \"#tour1-step1\",\n      side: \"top\",\n      showControls: true,\n      pointerPadding: 10,\n      pointerRadius: 10,\n      nextRoute: \"/foo\",\n      prevRoute: \"/bar\"\n    }\n    ...\n  ],\n  tour: \"secondtour\",\n  steps: [\n    icon: \u003c\u003e👋👋\u003c/\u003e,\n      title: \"Second tour, Step 1\",\n      content: \u003c\u003eSecond tour, first step!\u003c/\u003e,\n      selector: \"#onborda-step1\",\n      side: \"top\",\n      showControls: true,\n      pointerPadding: 10,\n      pointerRadius: 10,\n      nextRoute: \"/foo\",\n      prevRoute: \"/bar\"\n  ]\n}\n```\n\n### Onborda Props\n\n| Property        | Type                  | Description                                                                           |\n|-----------------|-----------------------|---------------------------------------------------------------------------------------|\n| `children`      | `React.ReactNode`     | Your website or application content.                                                  |\n| `interact`      | `boolean`             | Optional. Controls whether the onboarding overlay should be interactive. Defaults to `false`. |\n| `steps`         | `Array[]`             | An array of `Step` objects defining each step of the onboarding process.              |\n| `showOnborda`   | `boolean`             | Optional. Controls the visibility of the onboarding overlay, eg. if the user is a first time visitor. Defaults to `false`.                         |\n| `shadowRgb`     | `string`              | Optional. The RGB values for the shadow color surrounding the target area. Defaults to black `\"0,0,0\"`.      |\n| `shadowOpacity` | `string`              | Optional. The opacity value for the shadow surrounding the target area. Defaults to `\"0.2\"`          |\n| `customCard`    | `React.ReactNode`     | Optional. A custom card (or tooltip) that can be used to replace the default TailwindCSS card. |\n| `cardTransition`| `Transition`          | Transitions between steps are of the type Transition from [framer-motion](https://www.framer.com/motion/transition/), see the [transition docs](https://www.framer.com/motion/transition/) for more info. Example: `{{ type: \"spring\" }}`. |\n\n\n```tsx\n\u003cOnborda\n  steps={steps}\n  showOnborda={true}\n  shadowRgb=\"55,48,163\"\n  shadowOpacity=\"0.8\"\n  cardComponent={CustomCard}\n  cardTransition={{ duration: 2, type: \"tween\" }}\n\u003e\n  {children}\n\u003c/Onborda\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuixmat%2Fonborda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuixmat%2Fonborda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuixmat%2Fonborda/lists"}