PageSourceSearch

https://nextstepjs.com/docs/react

html nextstepjs.com collected 2026-10-09 22:05:59 UTC 146,144 bytes, 12 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/GeistMonoVF-s.p.1lv5tp2fpjxdz.woff" as="font" crossorigin="" type="font/woff"/><link rel="preload" href="/_next/static/media/GeistVF-s.p.0e569l9b0bre8.woff" as="font" crossorigin="" type="font/woff"/><link rel="stylesheet" href="/_next/static/chunks/2dsexdsa-k_ye.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/0h1cr6h7k2r3s.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/2iho8jepmwwua.js"/>
1<script src="/_next/static/chunks/2b8v6l2mbokjl.js" async=""></script>
1<script src="/_next/static/chunks/1ta6yw83zqgzq.js" async=""></script>
1<script src="/_next/static/chunks/2ve6jpuxenzmn.js" async=""></script>
1<script src="/_next/static/chunks/27jktro2p5rq9.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-08tsnaa6wpx_b.js" async=""></script>
1<script src="/_next/static/chunks/2t9b-28nxadmh.js" async=""></script>
1<script src="/_next/static/chunks/44l554y32qz4i.js" async=""></script>
1<script src="/_next/static/chunks/44p37290qsddb.js" async=""></script>
1<script src="/_next/static/chunks/1c-59zifqwoa3.js" async=""></script>
1<script src="/_next/static/chunks/3l10wonprphhy.js" async=""></script>
1<script src="/_next/static/chunks/3zs314ain49wx.js" async=""></script>
1<script src="/_next/static/chunks/3p11gbnz98ims.js" async=""></script>
1<script src="/_next/static/chunks/2bvxi2ybc6-bg.js" async=""></script>
1<script src="/_next/static/chunks/2olu-5e8pelk_.js" async=""></script>
1<script src="/_next/static/chunks/1uiedjjmjne07.js" async=""></script>
1<script src="/_next/static/chunks/3cqr80885sfrt.js" async=""></script>
1<script src="/_next/static/chunks/42kxs6npjgpjt.js" async=""></script>
1<script src="/_next/static/chunks/2enjo-gw_loy6.js" async=""></script>
1<meta name="next-size-adjust" content=""/><title>React Documentation - NextStepjs</title><meta name="description" content="Documentation for NextStepjs for React. Learn how to implement user onboarding, interactive tutorials, and product tours in your React applications."/><meta name="application-name" content="NextStep"/><meta name="keywords" content="next.js onboarding library,react onboarding,nextstepjs,onboarding wizard,product tour,interactive tutorial,next.js tutorial,next.js product demo,onboarding component,onboarding flow,onboarding guide,React onboarding library,react onboarding wizard,next.js onboarding wizard,shadcn onboarding,react onboarding documentation,react product tours,react interactive tutorials,react user guides,react onboarding component"/><link rel="canonical" href="https://nextstepjs.com/docs/react"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="NextStep - Lightweight Next.js / React Onboarding Library"/><link href="https://nextstepjs.com/ogThumbnail.png" rel="apple-touch-startup-image"/><meta name="apple-mobile-web-app-status-bar-style" content="default"/><meta property="og:title" content="NextStep - Lightweight Next.js / React Onboarding Library"/><meta property="og:description" content="Easily create user friendly onboarding experiences with our lightweight onboarding library for Next.js / React. Step by step guides, product tours, and interactive walkthroughs for seemless user flows."/><meta property="og:url" content="https://nextstepjs.com/docs/react"/><meta property="og:site_name" content="NextStep"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://nextstepjs.com/ogThumbnail.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="NextStep - Lightweight Next.js / React Onboarding Library"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@AlexZDevs"/><meta name="twitter:creator" content="@AlexZDevs"/><meta name="twitter:title" content="NextStep - Next.js / React Onboarding Library"/><meta name="twitter:description" content="Easily create user friendly onboarding experiences with our lightweight onboarding library for Next.js / React. Step by step guides, product tours, and interactive walkthroughs for seemless user flows."/><meta name="twitter:image" content="https://nextstepjs.com/xThumbnail.png"/><link rel="shortcut icon" href="https://nextstepjs.com/icon.png"/><link rel="icon" href="https://nextstepjs.com/icon.png"/><link rel="apple-touch-icon" href="https://nextstepjs.com/icon.png"/>
1<script src="/_next/static/chunks/0cz1d0mv5g_q7.js" noModule=""></script>
1</head><body class="geistsans_47a3c9f1-module__MCSGAW__variable geistmono_cfbefb1d-module__fDTvyq__variable antialiased"><div hidden=""><!--$--><!--/$--></div><div data-name="nextstep-wrapper" data-nextstep="dev" style="position:relative;width:100%"><div data-name="nextstep-site" style="display:block;width:100%"><div class="min-h-screen bg-background text-foreground flex flex-col"><header class="container mx-auto py-6 flex justify-between items-center px-4"><a class="text-2xl font-bold flex items-center gap-2" href="/react"><img alt="NextStep - Lightweight Next.js Onboarding Library Logo" loading="lazy" width="32" height="32" decoding="async" data-nimg="1" class="rounded-lg" style="color:transparent" src="https://nextstepjs.com/icon.png"/><p class="hidden md:block">NextStep</p></a><nav class="flex items-center space-x-4"><a class="flex items-center space-x-2" href="/docs/react"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open w-5 h-5" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><span class="hidden md:block">Docs</span></a><a class="flex items-center space-x-2" href="https://github.com/enszrlu/NextStep"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-5 h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="hidden md:block">GitHub</span></a><a target="_blank" href="https://x.com/AlexZDevs"><button class="justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 flex items-center space-x-2"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" class="w-5 h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z"></path></svg><span class="hidden md:block">Twitter</span></button></a><a id="tour1-step9" href="https://buymeacoffee.com/enszrlu"><button class="justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-coffee w-5 h-5" aria-hidden="true"><path d="M10 2v2"></path><path d="M14 2v2"></path><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"></path><path d="M6 2v2"></path></svg><span class="hidden md:block">Buy Me a Coffee</span></button></a></nav></header><main class="flex-1 px-4"><div class="container mx-auto flex-1 items-start md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10 h-full"><div class="sticky top-0 z-40 flex h-16 items-center justify-between md:hidden bg-background px-4"><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-9 py-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden" type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu h-6 w-6" aria-hidden="true"><path d="M4 12h16"></path><path d="M4 18h16"></path><path d="M4 6h16"></path></svg><span class="sr-only">Toggle Menu</span></button><div class="flex items-center gap-2"><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&amp;&gt;span]:line-clamp-1 w-[150px] md:w-[180px]"><span style="pointer-events:none"></span><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" aria-hidden="true"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819
1L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&amp;&gt;span]:line-clamp-1 w-[150px] md:w-[180px]"><span style="pointer-events:none">Select Framework</span><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" aria-hidden="true"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"><option value="" selected=""></option></select></div></div><aside class="fixed top-16 z-30 hidden w-full shrink-0 overflow-y-auto border-r md:sticky md:block h-full"><div class="h-full py-6 pl-2 pr-4 lg:py-8"><div class="flex items-start gap-2 flex-col pb-6"><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&amp;&gt;span]:line-clamp-1 w-[150px] md:w-[180px]"><span style="pointer-events:none"></span><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" aria-hidden="true"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&amp;&gt;span]:line-clamp-1 w-[150px] md:w-[180px]"><span style="pointer-events:none">Select Framework</span><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" aria-hidden="true"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819
1L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"><option value="" selected=""></option></select></div><div class="w-full"><div class="pb-4"><h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Getting Started</h4><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground bg-accent text-accent-foreground font-medium" href="/docs/react">Installation</a><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/basic-setup">Basic Setup</a><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/tour-steps">Tour Steps</a><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/useNextStep">useNextStep Hook</a></div><div class="pb-4"><h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Features</h4><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/routing">Routing During Tour</a><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/viewport">NextStepViewport</a><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/callbacks">Callbacks</a><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/keyboard">Keyboard Navigation</a><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/localization">Localization</a><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/validation">Validation</a></div><div class="pb-4"><h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Customization</h4><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/styling">Styling</a><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/dark-mode">Dark Mode</a><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/animations">Animations</a></div><div class="pb-4"><h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">API Reference</h4><a class="block rounded-md px-2 py-1 text-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground" href="/docs/react/api">API Reference</a></div></div></div></aside><main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_200px]"><div class="mx-auto w-full min-w-0"><div class="flex flex-col gap-4"><h1 class="text-4xl font-semibold mb-2" id="getting-started">NextStep Installation</h1><p class="text-xl">NextStep is very easy to install and set up. You can install it using your favorite package manager to your <!-- -->React<!-- --> project.</p><div class="flex flex-col gap-4"><h2 class="text-2xl font-semibold">Select your framework</h2><div class="flex gap-4 flex-wrap">
1<div class="flex gap-4 p-4 bg-foreground/70 text-background rounded-md flex-col justify-center items-center"><a class="flex gap-4 h-24 w-24 rounded-md flex-col justify-center items-center" href="/docs/nextjs"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="w-10 h-10" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM15.9999 8H14.6499V12H15.9999V8ZM9.34609 9.70937L15.405 17.5379L16.4591 16.7293L9.68281 8H8V15.9969H9.34609V9.70937Z"></path></svg>Next.js</a></div><div class="flex gap-4 p-4 text-background rounded-md flex-col justify-center items-center ring-4 bg-foreground ring-primary"><a class="flex gap-4 h-24 w-24 rounded-md flex-col justify-center items-center" href="/docs/react"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="w-10 h-10" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M14.448 16.2394C13.8809 17.0412 13.2933 17.7714 12.7015 18.4146C14.3738 20.0375 15.9291 20.7975 16.792 20.2993C17.6549 19.8011 17.7744 18.0742 17.2051 15.8145C16.3521 16.0054 15.426 16.1492 14.448 16.2394ZM13.138 16.3265C12.7641 16.342 12.3845 16.3499 12.0003 16.3499C11.6161 16.3499 11.2365 16.342 10.8627 16.3265C11.2394 16.8188 11.6208 17.2749 12.0003 17.6905C12.3798 17.2749 12.7612 16.8188 13.138 16.3265ZM18.1787 8.43278C20.8434 9.19718 22.5837 10.4672 22.5837 11.9999C22.5837 13.5325 20.8434 14.8026 18.1787 15.567C18.8491 18.2569 18.6193 20.399 17.292 21.1653C15.9647 21.9316 13.9947 21.0595 12.0003 19.134C10.006 21.0595 8.03596 21.9316 6.70866 21.1653C5.38136 20.399 5.15158 18.2569 5.82195 15.567C3.15724 14.8026 1.41699 13.5325 1.41699 11.9999C1.41699 10.4672 3.15724 9.19718 5.82195 8.43278C5.15158 5.74288 5.38136 3.60075 6.70866 2.83443C8.03596 2.06811 10.006 2.94019 12.0003 4.86569C13.9947 2.94019 15.9647 2.06811 17.292 2.83443C18.6193 3.60075 18.8491 5.74288 18.1787 8.43278ZM17.2051 8.18527C17.7744 5.92558 17.6549 4.19865 16.792 3.70046C15.9291 3.20226 14.3738 3.96221 12.7015 5.58509C13.2933 6.2283 13.8809 6.95849 14.448 7.76031C15.426 7.85054 16.3521 7.99432 17.2051 8.18527ZM6.79554 15.8145C6.22624 18.0742 6.34577 19.8011 7.20866 20.2993C8.07155 20.7975 9.62688 20.0375 11.2992 18.4146C10.7073 17.7714 10.1197 17.0412 9.55262 16.2394C8.57467 16.1492 7.6485 16.0054 6.79554 15.8145ZM10.8627 7.67324C11.2365 7.65776 11.6161 7.64987 12.0003 7.64987C12.3845 7.64987 12.7641 7.65776 13.138 7.67324C12.7612 7.18096 12.3798 6.7248 12.0003 6.30922C11.6208 6.7248 11.2394 7.18096 10.8627 7.67324ZM9.55262 7.76031C10.1197 6.95849 10.7073 6.2283 11.2992 5.58509C9.62688 3.96221 8.07155 3.20226 7.20866 3.70046C6.34577 4.19865 6.22624 5.92558 6.79554 8.18527C7.6485 7.99432 8.57467 7.85054 9.55262 7.76031ZM13.8939 15.2797C14.2395 14.7728 14.5772 14.2366 14.9015 13.6749C15.2258 13.1131 15.5213 12.5526 15.7875 11.9999C15.5213 11.4471 15.2258 10.8866 14.9015 10.3249C14.5772 9.76311 14.2395 9.22694 13.8939 8.72005C13.2821 8.6742 12.649 8.64987 12.0003 8.64987C11.3517 8.64987 10.7185 8.6742 10.1067 8.72005C9.76112 9.22694 9.42347 9.76311 9.09914 10.3249C8.77481 10.8866 8.4793 11.4471 8.21312 11.9999C8.4793 12.5526 8.77481 13.1131 9.09914 13.6749C9.42347 14.2366 9.76112 14.7728 10.1067 15.2797C10.7185 15.3255 11.3517 15.3499 12.0003 15.3499C12.649 15.3499 13.2821 15.3255 13.8939 15.2797ZM15.1785 15.1484C15.7932 15.0683 16.3789 14.9661 16.9286 14.8452C16.7584 14.3087 16.5541 13.7504 16.3161 13.178C16.1426 13.5095 15.9596 13.8421 15.7675 14.1749C15.5754 14.5076 15.3788 14.8324 15.1785 15.1484ZM8.82218 8.85133C8.20747 8.93147 7.62174 9.03367 7.07208 9.15454C7.24223 9.691 7.44659 10.2494 7.68454 10.8218C7.85806 10.4903 8.04101 10.1576 8.23311 9.82487C8.42522 9.49212 8.62185 9.16736 8.82218 8.85133ZM7.07208 14.8452C7.62174 14.9661 8.20747 15.0683 8.82218 15.1484C8.62185 14.8324 8.42522 14.5076 8.23311 14.1749C8.04101 13.8421 7.85806 13.5095 7.68454 13.178C7.44659 13.7504 7.24223 14.3087 7.07208 14.8452ZM6.09439 14.6C6.35551 13.7659 6.69407 12.8919 7.10491 11.9999C6.69407 11.1078 6.35551 10.2339 6.09439 9.39969C3.85279 10.0365 2.41699 11.0035 2.41699 11.9999C2.41699 12.9962 3.85279 13.9632 6.09439 14.6ZM16.9286 9.15454C16.3789 9.03367 15.7932 8.93147 15.1785 8.85133C15.3788 9.16736 15.5754 9.49212 15.7675 9.82487C15.9596 10.1576 16.
11426 10.4903 16.3161 10.8218C16.5541 10.2494 16.7584 9.691 16.9286 9.15454ZM17.9063 9.39969C17.6451 10.2339 17.3066 11.1078 16.8957 11.9999C17.3066 12.8919 17.6451 13.7659 17.9063 14.6C20.1479 13.9632 21.5837 12.9962 21.5837 11.9999C21.5837 11.0035 20.1479 10.0365 17.9063 9.39969ZM12.0003 13.879C10.9625 13.879 10.1212 13.0377 10.1212 11.9999C10.1212 10.962 10.9625 10.1207 12.0003 10.1207C13.0382 10.1207 13.8795 10.962 13.8795 11.9999C13.8795 13.0377 13.0382 13.879 12.0003 13.879Z"></path></svg>React</a></div><div class="flex gap-4 p-4 bg-foreground/70 text-background rounded-md flex-col justify-center items-center"><a class="flex gap-4 h-24 w-24 rounded-md flex-col justify-center items-center" href="/docs/react-router"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-10 h-10" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.118 5.466a2.306 2.306 0 00-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 00-1.613-.73zm-4.785 4.36a2.145 2.145 0 00-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 00-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z"></path></svg>React Router</a></div>
1<div class="flex gap-4 p-4 bg-foreground/70 text-background rounded-md flex-col justify-center items-center"><a class="flex gap-4 h-24 w-24 rounded-md flex-col justify-center items-center" href="/docs/remix"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="w-10 h-10" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21.511 18.508c.216 2.773.216 4.073.216 5.492H15.31c0-.309.006-.592.011-.878.018-.892.036-1.821-.109-3.698-.19-2.747-1.374-3.358-3.55-3.358H1.574v-5h10.396c2.748 0 4.122-.835 4.122-3.049 0-1.946-1.374-3.125-4.122-3.125H1.573V0h11.541c6.221 0 9.313 2.938 9.313 7.632 0 3.511-2.176 5.8-5.114 6.182 2.48.497 3.93 1.909 4.198 4.694ZM1.573 24v-3.727h6.784c1.133 0 1.379.84 1.379 1.342V24Z"></path></svg>Remix</a></div></div></div><div id="installation" class="flex flex-col gap-4"><h2 class="text-2xl font-semibold">Installation</h2><div class="w-fit"><div role="menubar" class="h-9 items-center space-x-1 border p-1 shadow-sm flex w-fit mx-auto bg-muted rounded-md cursor-pointer border-none" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="menuitem" id="radix-_R_t2npfsnpf9dbH1_" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="select-none items-center px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex w-fit bg-muted rounded-md cursor-pointer border-none" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><div class="flex w-full items-center justify-center gap-4 bg-muted h-full rounded-md cursor-pointer" data-state="closed"><code class="text-center font-mono  w-fit">npm install nextstepjs motion</code><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-5 h-5" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></div></button></div></div><pre class="rounded-md"><code class="language-bash"># npm
2npm i nextstepjs motion
3
4# pnpm
5pnpm add nextstepjs motion
6
7# yarn
8yarn add nextstepjs motion
9
10# bun
11bun add nextstepjs motion</code></pre></div><div class="p-4 bg-amber-100 dark:bg-amber-900/50 border border-amber-300 dark:border-amber-700 rounded-md"><p class="font-semibold text-amber-800 dark:text-amber-200">⚠️ Using Vite?</p><p class="text-amber-700 dark:text-amber-300 mt-1">If you&#x27;re using Vite, you&#x27;ll need additional configuration to mock<!-- --> <code class="bg-amber-200 dark:bg-amber-800 px-1 rounded">next/navigation</code>. See the<!-- --> <a class="underline font-medium" href="/docs/react/basic-setup">Basic Setup</a> <!-- -->page for detailed instructions.</p></div><div class="flex self-end"><a href="/docs/react/basic-setup"><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-4 h-4 mr-2" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg> Basic Setup</button></a></div></div><!--$--><!--/$--></div></main></div></main><footer class="py-12 border-t shadow-[0_0_10px_rgba(0,0,0,0.1)] px-0"><div class="container mx-auto px-4"><div class="grid grid-cols-1 md:grid-cols-3 gap-8"><div class="space-y-4"><a class="flex items-center gap-2" href="/"><span class="text-xl font-bold">NextStep</span></a><p class="text-sm text-gray-400">A lightweight onboarding library for Next.js</p><p class="text-sm text-gray-400">Copyright © <!-- -->2026<!-- --> - All rights reserved</p></div><div><a class="text-lg font-medium mb-4" href="/docs">Documentation</a><ul class="space-y-2"><li><a class="text-gray-400  transition-colors" href="/docs/nextjs">Next.js</a></li><li><a class="text-gray-400  transition-colors" href="/docs/react">React</a></li><li><a class="text-gray-400  transition-colors" href="/docs/react-router">React Router</a></li><li><a class="text-gray-400  transition-colors" href="/docs/remix">Remix</a></li><li><a class="text-gray-400  transition-colors" href="/demo">Demo</a></li><li><a class="text-gray-400  transition-colors" href="/faq">FAQ</a></li><li><a class="text-gray-400  transition-colors" href="/docs/v1">Version 1.x Docs</a></li></ul></div><div><h3 class="text-lg font-medium mb-4">Frameworks</h3><ul class="space-y-2"><li><a class="text-gray-400  transition-colors" href="/nextjs">Next.js</a></li><li><a class="text-gray-400  transition-colors" href="/react">React</a></li><li><a class="text-gray-400  transition-colors" href="/react-router">React Router</a></li><li><a class="text-gray-400  transition-colors" href="/remix">Remix</a></li></ul></div></div></div></footer><button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 w-9 fixed bottom-4 right-4 z-50 rounded-full opacity-0 transition-all duration-300 hover:scale-110" aria-label="Scroll to top"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up h-4 w-4" aria-hidden="true"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg></button></div></div></div><div role="region" aria-label="Notifications (F8)" tabindex="-1" style="pointer-events:none"><ol tabindex="-1" class="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"></ol></div>
11<script src="/_next/static/chunks/2iho8jepmwwua.js" id="_R_" async=""></script>
11<script>(self.__next_f=self.__next_f||[]).push([0])</script>
11<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[79520,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"\"]\n4:I[90491,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"NextStepProvider\"]\n5:I[94808,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"default\"]\n8e:I[24323,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"onNextStepStart\"]\n8f:I[24323,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"onNextStepComplete\"]\n90:I[24323,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"onNextStepSkip\"]\n91:I[24323,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"onNextStepStepChange\"]\n9a:I[68027,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/2dsexdsa-k_ye.css\",\"style\"]\n:HL[\"/_next/static/media/GeistMonoVF-s.p.1lv5tp2fpjxdz.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n:HL[\"/_next/static/media/GeistVF-s.p.0e569l9b0bre8.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n:HL[\"/_next/static/chunks/0h1cr6h7k2r3s.css\",\"style\"]\n3:T6d8,"])</script>
11<script>self.__next_f.push([1,"[{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareApplication\",\"name\":\"NextStepjs\",\"title\":\"NextStepjs - Lightweight Next.js / React Onboarding Library\",\"description\":\"NextStepjs is a lightweight and open-source onboarding library for Next.js / React applications. It helps developers create step-by-step guides, interactive tutorials, and product tours to enhance user experience seamlessly.\",\"url\":\"https://nextstepjs.com\",\"applicationCategory\":\"Developer Tools\",\"operatingSystem\":\"Web\",\"offers\":{\"@type\":\"Offer\",\"price\":\"0\",\"priceCurrency\":\"USD\",\"availability\":\"https://schema.org/InStock\"},\"author\":{\"@type\":\"Organization\",\"name\":\"NextStepjs Team\",\"url\":\"https://github.com/enszrlu/NextStep\"},\"publisher\":{\"@type\":\"Organization\",\"name\":\"NextStepjs Team\",\"url\":\"https://github.com/enszrlu/NextStep\"},\"softwareVersion\":\"1.2.0\",\"programmingLanguage\":\"JavaScript\",\"datePublished\":\"2025-01-01\",\"license\":\"https://opensource.org/licenses/MIT\",\"isAccessibleForFree\":true,\"keywords\":[\"NextStepjs\",\"Next.js onboarding library\",\"product tours for Next.js\",\"interactive tutorials\",\"step-by-step guides\",\"onboarding wizard\",\"user onboarding library\",\"Next.js tools\",\"web onboarding\",\"Next.js / React onboarding library\",\"React onboarding library\"],\"screenshot\":\"https://nextstepjs.com/images/screenshot.png\",\"potentialAction\":{\"@type\":\"InstallAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://nextstepjs.com\"}}},{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"NextStepjs Documentation\",\"description\":\"Official documentation for NextStepjs - the lightweight Next.js / React onboarding library\",\"url\":\"https://nextstepjs.com/docs\",\"publisher\":{\"@type\":\"Organization\",\"name\":\"NextStepjs Team\",\"url\":\"https://github.com/enszrlu/NextStep\"}}]"])</script>
11<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"docs\",\"react\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[\"(v2)\",{\"children\":[\"react\",{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2dsexdsa-k_ye.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/2t9b-28nxadmh.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/44l554y32qz4i.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/44p37290qsddb.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/1c-59zifqwoa3.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/3l10wonprphhy.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/chunks/3zs314ain49wx.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-6\",{\"src\":\"/_next/static/chunks/3p11gbnz98ims.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-7\",{\"src\":\"/_next/static/chunks/2bvxi2ybc6-bg.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"$L2\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$3\"}}]}],[\"$\",\"body\",null,{\"className\":\"geistsans_47a3c9f1-module__MCSGAW__variable geistmono_cfbefb1d-module__fDTvyq__variable antialiased\",\"children\":[[\"$\",\"$L4\",null,{\"children\":[\"$\",\"$L5\",null,{\"steps\":[{\"tour\":\"firsttour\",\"steps\":[{\"icon\":\"👋\",\"title\":\"Welcome to NextStep\",\"content\":[\"$\",\"p\",null,{\"children\":[\"Onboarding never been easier! This is how card looks like without selector.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"You can use buttons or arrow keys to navigate through the tour.\"]}],\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"🚀\",\"title\":\"Technologies used\",\"content\":[\"$\",\"p\",null,{\"children\":\"NextStep is built with Next.js, TailwindCSS, Framer Motion and Radix UI.\"}],\"selector\":\"#tour1-step2\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L6\",\"title\":\"How to use NextStep\",\"content\":\"$L7\",\"selector\":\"#tour1-step3\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":100,\"pointerRadius\":10},{\"icon\":\"$L8\",\"title\":\"Cosy Wrapper\",\"content\":\"$L9\",\"selector\":\"#tour1-step4\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$La\",\"title\":\"Cosy Wrapper\",\"content\":\"$Lb\",\"selector\":\"#tour1-step4-pagesrouter\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$Lc\",\"title\":\"One step at a time\",\"content\":\"$Ld\",\"selector\":\"#tour1-step5\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$Le\",\"title\":\"\\\"Çok Rahat Çok Profesyonel\\\", like Turkish olympic shooter\",\"content\":\"$Lf\",\"selector\":\"#tour1-step6\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L10\",\"title\":\"We hook you up\",\"content\":\"$L11\",\"selector\":\"#tour1-step7\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L12\",\"title\":\"Support the developer\",\"content\":\"$L13\",\"selector\":\"#tour1-step9\",\"side\":\"bottom-right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L14\",\"title\":\"Newsletter\",\"content\":\"$L15\",\"selector\":\"#newsletter-signup\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L16\",\"title\":\"Thats it!\",\"content\":\"$L17\",\"side\":\"top\",\"pointerPadding\":10,\"pointerRadius\":10,\"showControls\":true,\"showSkip\":false}]},{\"tour\":\"react-tour\",\"steps\":[{\"icon\":\"$L18\",\"title\":\"Welcome to NextStep for React\",\"content\":\"$L19\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L1a\",\"title\":\"Technologies used\",\"content\":\"$L1b\",\"selector\":\"#tour1-step2\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L1c\",\"title\":\"How to use NextStep\",\"content\":\"$L1d\",\"selector\":\"#tour1-step3\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":350,\"pointerRadius\":10},{\"icon\":\"$L1e\",\"title\":\"Cosy Wrapper\",\"content\":\"$L1f\",\"selector\":\"#tour1-step4\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L20\",\"title\":\"One step at a time\",\"content\":\"$L21\",\"selector\":\"#tour1-step5\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L22\",\"title\":\"Target any element\",\"content\":\"$L23\",\"selector\":\"#tour1-step6\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L24\",\"title\":\"We hook you up\",\"content\":\"$L25\",\"selector\":\"#tour1-step7\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10}
11,{\"icon\":\"$L26\",\"title\":\"Support the developer\",\"content\":\"$L27\",\"selector\":\"#tour1-step9\",\"side\":\"bottom-right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L28\",\"title\":\"Newsletter\",\"content\":\"$L29\",\"selector\":\"#newsletter-signup\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L2a\",\"title\":\"Thats it!\",\"content\":\"$L2b\",\"side\":\"top\",\"pointerPadding\":10,\"pointerRadius\":10,\"showControls\":true,\"showSkip\":false}]},{\"tour\":\"react-router-tour\",\"steps\":[{\"icon\":\"$L2c\",\"title\":\"Welcome to NextStep for React Router\",\"content\":\"$L2d\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L2e\",\"title\":\"Technologies used\",\"content\":\"$L2f\",\"selector\":\"#tour1-step2\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L30\",\"title\":\"How to use NextStep\",\"content\":\"$L31\",\"selector\":\"#tour1-step3\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":350,\"pointerRadius\":10},{\"icon\":\"$L32\",\"title\":\"React Router Adapter\",\"content\":\"$L33\",\"selector\":\"#tour1-step4\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L34\",\"title\":\"One step at a time\",\"content\":\"$L35\",\"selector\":\"#tour1-step5\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L36\",\"title\":\"Target any element\",\"content\":\"$L37\",\"selector\":\"#tour1-step6\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L38\",\"title\":\"We hook you up\",\"content\":\"$L39\",\"selector\":\"#tour1-step7\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L3a\",\"title\":\"Support the developer\",\"content\":\"$L3b\",\"selector\":\"#tour1-step9\",\"side\":\"bottom-right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L3c\",\"title\":\"Newsletter\",\"content\":\"$L3d\",\"selector\":\"#newsletter-signup\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L3e\",\"title\":\"Thats it!\",\"content\":\"$L3f\",\"side\":\"top\",\"pointerPadding\":10,\"pointerRadius\":10,\"showControls\":true,\"showSkip\":false}]},{\"tour\":\"remix-tour\",\"steps\":[{\"icon\":\"$L40\",\"title\":\"Welcome to NextStep for Remix\",\"content\":\"$L41\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L42\",\"title\":\"Technologies used\",\"content\":\"$L43\",\"selector\":\"#tour1-step2\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L44\",\"title\":\"How to use NextStep\",\"content\":\"$L45\",\"selector\":\"#tour1-step3\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":350,\"pointerRadius\":10},{\"icon\":\"$L46\",\"title\":\"Remix Adapter\",\"content\":\"$L47\",\"selector\":\"#tour1-step4\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L48\",\"title\":\"One step at a time\",\"content\":\"$L49\",\"selector\":\"#tour1-step5\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L4a\",\"title\":\"Target any element\",\"content\":\"$L4b\",\"selector\":\"#tour1-step6\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L4c\",\"title\":\"We hook you up\",\"content\":\"$L4d\",\"selector\":\"#tour1-step7\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10}
11,{\"icon\":\"$L4e\",\"title\":\"Support the developer\",\"content\":\"$L4f\",\"selector\":\"#tour1-step9\",\"side\":\"bottom-right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L50\",\"title\":\"Newsletter\",\"content\":\"$L51\",\"selector\":\"#newsletter-signup\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L52\",\"title\":\"Thats it!\",\"content\":\"$L53\",\"side\":\"top\",\"pointerPadding\":10,\"pointerRadius\":10,\"showControls\":true,\"showSkip\":false}]},{\"tour\":\"demo\",\"steps\":[{\"icon\":\"$L54\",\"title\":\"Welcome to NextStep Demo\",\"content\":\"$L55\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L56\",\"title\":\"Anchor to any element\",\"content\":\"$L57\",\"selector\":\"#chart-1\",\"side\":\"top\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L58\",\"title\":\"Anchor to any side\",\"content\":\"$L59\",\"selector\":\"#chart-2\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"viewportID\":\"dashboard-demo\"},{\"icon\":\"$L5a\",\"title\":\"Route during the tour\",\"content\":\"$L5b\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"nextRoute\":\"/\"},{\"icon\":\"$L5c\",\"title\":\"Route during the tour\",\"content\":\"$L5d\",\"selector\":\"#hero-section-title\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"prevRoute\":\"/demo\",\"nextRoute\":\"/demo\"},{\"icon\":\"$L5e\",\"title\":\"Default Viewport\",\"content\":\"$L5f\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"prevRoute\":\"/\"},{\"icon\":\"$L60\",\"title\":\"Default Viewport\",\"content\":\"$L61\",\"selector\":\"#form-username\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":false,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L62\",\"title\":\"Custom Viewport\",\"content\":\"$L63\",\"selector\":\"#form-username\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":false,\"pointerPadding\":10,\"pointerRadius\":10,\"viewportID\":\"form-demo\"},{\"icon\":\"$L64\",\"title\":\"Custom Viewport\",\"content\":\"$L65\",\"selector\":\"#product-3\",\"side\":\"bottom-right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"viewportID\":\"product-list\"},{\"icon\":\"$L66\",\"title\":\"Documentation\",\"content\":\"$L67\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10}]},{\"tour\":\"docs-demo\",\"steps\":[{\"icon\":\"$L68\",\"title\":\"First Step\",\"content\":\"$L69\",\"selector\":\"#docs-demo-step1\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10},{\"icon\":\"$L6a\",\"title\":\"Second Step\",\"content\":\"$L6b\",\"selector\":\"#docs-demo-step2\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10}]},{\"tour\":\"next-js-routing-demo\",\"steps\":[{\"icon\":\"$L6c\",\"title\":\"Routing Demo\",\"content\":\"$L6d\",\"selector\":\"#routing-demo-step\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"nextRoute\":\"/\"},{\"icon\":\"$L6e\",\"title\":\"Support the Developer\",\"content\":\"$L6f\",\"selector\":\"#buy-me-a-coffee-button\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"prevRoute\":\"/docs/nextjs/routing\",\"nextRoute\":\"/docs/nextjs/routing\"},{\"icon\":\"$L70\",\"title\":\"Back to Docs\",\"content\":\"$L71\",\"selector\":\"#routing-demo-step\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"prevRoute\":\"/\"}]},{\"tour\":\"react-routing-demo\",\"steps\":[{\"icon\":\"$L72\",\"title\":\"Routing Demo\",\"content\":\"$L73\",\"selector\":\"#routing-demo-step\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"nextRoute\":\"/\"}
11,{\"icon\":\"$L74\",\"title\":\"Support the Developer\",\"content\":\"$L75\",\"selector\":\"#buy-me-a-coffee-button\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"prevRoute\":\"/docs/react/routing\",\"nextRoute\":\"/docs/react/routing\"},{\"icon\":\"$L76\",\"title\":\"Back to Docs\",\"content\":\"$L77\",\"selector\":\"#routing-demo-step\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"prevRoute\":\"/\"}]},{\"tour\":\"react-router-routing-demo\",\"steps\":[{\"icon\":\"$L78\",\"title\":\"Routing Demo\",\"content\":\"$L79\",\"selector\":\"#routing-demo-step\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"nextRoute\":\"/\"},{\"icon\":\"$L7a\",\"title\":\"Support the Developer\",\"content\":\"$L7b\",\"selector\":\"#buy-me-a-coffee-button\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"prevRoute\":\"/docs/react-router/routing\",\"nextRoute\":\"/docs/react-router/routing\"},{\"icon\":\"$L7c\",\"title\":\"Back to Docs\",\"content\":\"$L7d\",\"selector\":\"#routing-demo-step\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"prevRoute\":\"/\"}]},{\"tour\":\"remix-routing-demo\",\"steps\":[{\"icon\":\"$L7e\",\"title\":\"Routing Demo\",\"content\":\"$L7f\",\"selector\":\"#routing-demo-step\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"nextRoute\":\"/\"},{\"icon\":\"$L80\",\"title\":\"Support the Developer\",\"content\":\"$L81\",\"selector\":\"#buy-me-a-coffee-button\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"prevRoute\":\"/docs/remix/routing\",\"nextRoute\":\"/docs/remix/routing\"},{\"icon\":\"$L82\",\"title\":\"Back to Docs\",\"content\":\"$L83\",\"selector\":\"#routing-demo-step\",\"side\":\"bottom\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"prevRoute\":\"/\"}]},{\"tour\":\"sidebar-demo\",\"steps\":[{\"icon\":\"$L84\",\"title\":\"Welcome to NextStep for Sidebar\",\"content\":\"$L85\",\"selector\":\"#CLI\",\"side\":\"right\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"viewportID\":\"sidebar-viewport\"}]},{\"tour\":\"validation-demo\",\"steps\":[{\"icon\":\"$L86\",\"title\":\"Welcome to NextStep Validation Demo\",\"content\":\"$L87\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"blockKeyboardControl\":true},{\"icon\":\"$L88\",\"title\":\"Validate Minimum Window Width\",\"content\":\"$L89\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"blockKeyboardControl\":true},{\"icon\":\"$L8a\",\"title\":\"Validate Maximum Window Width\",\"content\":\"$L8b\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":100,\"pointerRadius\":10,\"blockKeyboardControl\":true},{\"icon\":\"$L8c\",\"title\":\"Your validations, your rules\",\"content\":\"$L8d\",\"showControls\":true,\"showSkip\":true,\"pointerPadding\":10,\"pointerRadius\":10,\"blockKeyboardControl\":true}]}],\"onStart\":\"$8e\",\"onComplete\":\"$8f\",\"onSkip\":\"$90\",\"onStepChange\":\"$91\",\"scrollToTop\":false,\"children\":\"$L92\"}]}],\"$L93\"]}]]}]]}],{\"children\":[\"$L94\",{\"children\":[\"$L95\",{\"children\":[\"$L96\",{\"children\":[\"$L97\",{},null,false,null]},null,false,\"$@98\"]},null,false,null]},null,false,\"$@98\"]},null,false,null],\"$L99\",false]],\"m\":\"$undefined\",\"G\":[\"$9a\",[\"$L9b\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"pRhggPd_wIk6y9PfXcATk\"}\n"])</script>
11<script>self.__next_f.push([1,"a8:I[22016,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\",\"/_next/static/chunks/2olu-5e8pelk_.js\",\"/_next/static/chunks/1uiedjjmjne07.js\",\"/_next/static/chunks/3cqr80885sfrt.js\",\"/_next/static/chunks/42kxs6npjgpjt.js\",\"/_next/static/chunks/2enjo-gw_loy6.js\"],\"\"]\na9:I[45678,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"default\"]\naa:I[39756,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"default\"]\nab:I[37457,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"default\"]\nac:I[13642,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"default\"]\nad:I[63687,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"default\"]\nae:I[77855,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"Toaster\"]\naf:I[8809,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\",\"/_next/static/chunks/2olu-5e8pelk_.js\",\"/_next/static/chunks/1uiedjjmjne07.js\"],\"default\"]\nb0:I[90525,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\",\"/_next/static/chunks/2olu-5e8pelk_.js\",\"/_next/static/chunks/1uiedjjmjne07.js\"],\"default\"]\nb1:I[6483,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\",\"/_next/static/chunks/2olu-5e8pelk_.js\",\"/_next/static/chunks/1uiedjjmjne07.js\"],\"default\"]\nb2:I[33635,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/stati"])</script>
11<script>self.__next_f.push([1,"c/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\",\"/_next/static/chunks/2olu-5e8pelk_.js\",\"/_next/static/chunks/1uiedjjmjne07.js\"],\"default\"]\nbf:I[97367,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"ViewportBoundary\"]\nc1:I[97367,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"MetadataBoundary\"]\nc2:\"$Sreact.suspense\"\n6:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"fill\":\"none\",\"d\":\"M0 0h24v24H0z\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M20 17H4V5h8V3H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h4v2h8v-2h4c1.1 0 2-.9 2-2v-3h-2z\",\"children\":[]}],[\"$\",\"path\",\"2\",{\"d\":\"m17 14 5-5-1.41-1.41L18 10.17V3h-2v7.17l-2.59-2.58L12 9z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n7:[\"$\",\"p\",null,{\"children\":\"Install NextStep using your favorite package manager.\"}]\n8:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M20 2H7C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h12c1.654 0 3-1.346 3-3s-1.346-3-3-3H6v2h13a1 1 0 0 1 0 2H7c-1.654 0-3-1.346-3-3s1.346-3 3-3h13c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 10H7a4.973 4.973 0 0 0-3 1.002V7c0-1.654 1.346-3 3-3h13v8z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n9:[\"$\",\"p\",null,{\"children\":[\"Simply wrap your app with the NextStepProvider and NextStep in your global layout. Add steps to NextStep.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"If you want localization, don't forget to choose correct steps array per locale.\"]}]\na:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M20 2H7C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h12c1.654 0 3-1.346 3-3s-1.346-3-3-3H6v2h13a1 1 0 0 1 0 2H7c-1.654 0-3-1.346-3-3s1.346-3 3-3h13c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 10H7a4.973 4.973 0 0 0-3 1.002V7c0-1.654 1.346-3 3-3h13v8z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\nb:[\"$\",\"p\",null,{\"children\":[\"If you are using Pages Router, you need to wrap your app with the NextStepProvider and NextStep in your _app.tsx.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"Don't forget to update your next.config to enable esmExternals.\"]}]\nc:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 256 256\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M240,56V184a16,16,0,0,1-16,16H72V152h56V104h56V56Z\",\"opacity\":\"0.2\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M248,56a8,8,0,0,1-8,8H192v40a8,8,0,0,1-8,8H136v40a8,8,0,0,1-8,8H80v40a8,8,0,0,1-8,8H16a8,8,0,0,1,0-16H64V152a8,8,0,0,1,8-8h48V104a8,8,0,0,1,8-8h48V56a8,8,0,0,1,8-8h56A8,8,0,0,1,248,56Z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\nd:[\"$\",\"p\",null,{\"children\":[\"Create your steps array. See\",\" \",[\"$\",\"a\",null,{\"className\":\"text-primary\",\"href\":\"/docs\",\"target\":\"_blank\",\"children\":\"docs\"}],\" \",\"for more details.\"]}]\n9c:T473,M226.063 24.22l-9.782 32.624c12.992-2.652 26.423-4.032 40.19-4.032 10.475 0 20.766.82 30.81 2.376l-9.405-30.97h-
1151.813zm30.406 48.843c-99.627 0-180.19 80.5"])</script>
11<script>self.__next_f.push([1,"3-180.19 180.156 0 99.624 80.563 180.155 180.19 180.155 99.624 0 180.155-80.53 180.155-180.156 0-99.627-80.53-180.157-180.156-180.157zm0 41.687c76.482 0 138.467 61.985 138.467 138.47 0 76.482-61.985 138.5-138.468 138.5-76.485 0-138.5-62.018-138.5-138.5 0-76.485 62.015-138.47 138.5-138.47zm-.033 38.938c-54.96 0-99.53 44.54-99.53 99.5s44.57 99.5 99.53 99.5 99.5-44.54 99.5-99.5-44.54-99.5-99.5-99.5zm.032 39.687c33.052 0 59.842 26.79 59.842 59.844 0 33.052-26.79 59.843-59.843 59.843-33.055 0-59.845-26.79-59.845-59.844 0-33.055 26.79-59.845 59.844-59.845zm0 30.906c-15.993 0-28.97 12.947-28.97 28.94 0 15.99 12.977 28.968 28.97 28.968 15.99 0 28.936-12.977 28.936-28.97 0-15.99-12.945-28.937-28.937-28.937zM114.905 395l-27.844 92.875h46.876l20.28-62.313c-14.35-8.54-27.56-18.833-39.312-30.562zm277.188 5.688c-11.982 11.026-25.324 20.595-39.72 28.468l19.25 58.72h46.907l-26.436-87.188zm-165.03 50.78v36.407h52.092v-35.53c-7.45.84-15.015 1.28-22.687 1.28-9.99 0-19.81-.74-29.408-2.156ze:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$9c\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\nf:\"You can target any element with easy, simply use same id with step's selector.\"\n9d:T5b6,"])</script>
11<script>self.__next_f.push([1,"M196.375 18.25c3.91 19.165-.907 37.814-14.72 55.5-15.853 20.302-44.172 38.85-84.81 51.188-34.84 10.577-58.396 29.203-71 50.937-12.606 21.734-14.02 46.364-5.72 67.5 14.824 37.743 60.4 62.92 121.28 47.438 12.883-4.053 27.47-10 38.97-17.188 2.51-1.568 4.828-3.18 6.938-4.813-2.885-2.7-5.43-5.853-7.5-9.437-.683-1.182-1.297-2.385-1.844-3.594-13.048 8.047-29.743 16.232-51.532 19.376-47.934 8.963-78.497-12.01-88.938-38.594-6.257-15.93-5.374-34.287 4.5-51.312 9.874-17.025 29.002-32.94 60.28-42.438 43.283-13.14 75.046-33.17 94.095-57.562 15.77-20.194 22.4-43.702 18.906-67h-18.905zm17.844 151.47c-.788 0-1.588 0-2.376.03-11.464.415-23.03 3.582-33.656 9.72-26.423 15.252-39.106 44.164-34.25 72.25 12.21-4.294 22.097-10.274 30.906-16.157 1.418-11.078 7.93-21.27 18.72-27.5 6.337-3.66 13.285-5.464 20.124-5.5 13.055-.07 25.668 6.304 32.656 18.406 10.648 18.44 4.066 42.974-14.375 53.624-8.564 4.945-18.115 5.99-26.97 3.844-4.427 4.08-9.466 7.747-14.72 11.03-5.286 3.306-10.918 6.29-16.655 8.97 15.17 10.68 33.97 15.17 52.25 12.125h.03l72.376 125.406c17.27 29.907 42.53 48.207 68.783 54.467 26.25 6.26 52.74 1.16 74.25-12.03 43.02-26.38 66.36-87.515 33.53-144.376l-16.53-28.655-.157-.28c-19.615-36.032-45.045-60.504-75.344-75.283 12.778 45.916 17.4 91.832 16.094 137.75l28.688-34 4.906-3L443 348.72c21.954 38.025 3.593 72.716-21.125 87.874-35.704 16.537-62.567 12.018-84.625-23.125l-71.78-124.376c20.72-22.425 25.7-57.052 9.78-84.625-13-22.517-36.637-34.833-61.03-34.75z"])</script>
11<script>self.__next_f.push([1,"10:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$9d\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n11:[\"You can control NextStep with ease. Simply use\",\" \",[\"$\",\"span\",null,{\"className\":\"font-bold\",\"children\":\"useNextStep\"}],\" hook.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],[\"$\",\"a\",null,{\"className\":\"text-primary\",\"href\":\"/docs\",\"target\":\"_blank\",\"children\":\"Check docs\"}],\" \",\"for more details.\"]\n9e:Ta12,"])</script>
11<script>self.__next_f.push([1,"M203.043 26.648c-8.893.062-17.672 1.326-26.193 3.873-8.454 2.53-16.242 6.197-23.31 10.867 7.722 19.622 27.435 44.53 50.27 65.793 23.842 22.202 51.18 41.065 68.835 49.572l.207.1.203.103c16.224 8.335 27.71 21.453 34.34 35.924 4.27 9.318 6.757 19.078 8.207 29 13-10.14 26.704-18.26 40.636-24.153-1.06-18.31-5.088-37.51-12.424-56.735-15.386-40.32-42.26-72.78-72.695-92.576-21.875-14.228-45.35-21.926-68.077-21.768zm-76.408 42.305c-5.113 7.934-9.306 16.78-12.492 26.387-10.64 32.074-9.777 72.308 5.61 112.63 9.312 24.403 22.837 45.92 38.81 63.5 15.736 4.708 31.3 11.982 45.92 21.852 11.296 7.627 21.362 16.357 30.085 25.852 2.847.692 5.695 1.282 8.54 1.746 5.42-14.138 12.455-28.204 21.124-41.85 5.353-8.424 11.116-16.354 17.21-23.757.072-5.192.03-10.223-.217-15.026-.67-12.99-2.75-24.1-6.56-32.414-3.808-8.314-8.77-14.122-18.06-18.894l.41.202c-22.878-11.025-51.447-31.172-77.74-55.655-20.9-19.46-40.288-41.258-52.64-64.574zm279.752 135.725c-13.507.11-27.796 3.247-42.252 9.248-30.84 12.802-61.806 38.75-84.71 74.797-11.717 18.442-20.137 37.67-25.372 56.523 20.55 34.478 25.597 74.082 10.793 107.342 2.417 3.444 5.08 6.657 7.986 9.613 21.644-18.674 46.588-34.143 64.316-50.028 9.69-8.68 17.027-17.275 21.104-25.46 4.077-8.187 5.48-15.697 3.36-25.923l-.124-.595-.082-.6c-8.053-58.294 6.075-92.552 26.664-113.51 16.556-16.85 33.036-25.725 44.405-37.442-8.214-2.73-16.972-4.04-26.088-3.965zm56.746 23.953c-16.63 20.67-37.133 30.217-49.383 42.686-14.076 14.328-23.793 31.575-16.715 83.104 3.408 17.52.413 34.346-6.558 48.342-7.097 14.247-17.71 25.832-29.305 36.222-17.613 15.782-37.93 29.296-54.926 42.48 19.275 5.007 41.22 2.584 63.565-6.693 30.84-12.8 61.808-38.75 84.71-74.797 22.905-36.048 33.24-75.107 31.728-108.463-1.156-25.51-9.035-47.368-23.115-62.88zm-66.098 125.79c-.06-.315-.108-.628-.174-.943l.208 1.193c-.01-.085-.02-.165-.033-.25zm-280.223-71.424c-18.383-.166-35.7 3.865-50.275 11.807.1.003.187.01.287.013 8.63.305 19.464-.713 31.938.99 12.473 1.704 27.085 7.368 38.154 19.893 11.07 12.524 18.66 30.28 23.947 55.78l.125.594.082.602c2.453 17.792 13.786 28.085 33.434 37.722 16.764 8.223 38.287 14.095 58.717 20.073 9.15-41-12.56-91.006-58.81-122.23-24.938-16.836-52.274-25.015-77.597-25.244zm-81.078 41.447c-25.27 43.53-5.004 107.405 50.106 144.612 54.225 36.61 119.786 32.276 151.34-5.7-18.436-5.254-39.336-11.22-58.53-20.634-24.75-12.14-48.34-32.54-53.1-64.222-4.533-21.7-10.59-33.28-15.61-38.96-5.04-5.707-8.97-7.095-16.05-8.06-7.08-.968-16.81-.277-28.333-.683-8.98-.316-19.516-1.605-29.823-6.352zm89.817 54.055c.022.1.044.192.065.293l-.207-1.196c.042.304.097.6.143.904z"])</script>
11<script>self.__next_f.push([1,"12:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$9e\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n13:\"If you like NextStep, please support the developer.\"\n14:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 576 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M552 64H88c-13.255 0-24 10.745-24 24v8H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h472c26.51 0 48-21.49 48-48V88c0-13.255-10.745-24-24-24zM56 400a8 8 0 0 1-8-8V144h16v248a8 8 0 0 1-8 8zm236-16H140c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm208 0H348c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm-208-96H140c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm208 0H348c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm0-96H140c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h360c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n15:[\"$\",\"p\",null,{\"children\":[\"We are improving NextStep with React support, so you can use it with any framework. \",[\"$\",\"br\",null,{}],\" \",[\"$\",\"br\",null,{}],\"Sign up to hear about our latest updates.\"]}]\n16:\"🎉🎉🎉\"\n17:[\"Don't forget to leave a star on\",\" \",[\"$\",\"a\",null,{\"href\":\"https://github.com/enszrlu/NextStep\",\"target\":\"_blank\",\"className\":\"text-primary\",\"children\":\"GitHub\"}],\"!\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"⭐️⭐️⭐️⭐️⭐️\"]\n18:\"👋\"\n19:[\"$\",\"p\",null,{\"children\":[\"Onboarding never been easier! This is how card looks like without selector.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"You can use buttons or arrow keys to navigate through the tour.\"]}]\n1a:\"🚀\"\n1b:[\"$\",\"p\",null,{\"children\":\"NextStep is built with React, TailwindCSS, and Framer Motion.\"}]\n1c:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"fill\":\"none\",\"d\":\"M0 0h24v24H0z\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M20 17H4V5h8V3H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h4v2h8v-2h4c1.1 0 2-.9 2-2v-3h-2z\",\"children\":[]}],[\"$\",\"path\",\"2\",{\"d\":\"m17 14 5-5-1.41-1.41L18 10.17V3h-2v7.17l-2.59-2.58L12 9z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n1d:[\"$\",\"p\",null,{\"children\":\"Install NextStep using your favorite package manager.\"}]\n1e:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M20 2H7C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h12c1.654 0 3-1.346 3-3s-1.346-3-3-3H6v2h13a1 1 0 0 1 0 2H7c-1.654 0-3-1.346-3-3s1.346-3 3-3h13c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 10H7a4.973 4.973 0 0 0-3 1.002V7c0-1.654 1.346-3 3-3h13v8z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n1f:[\"$\",\"p\",null,{\"children\":[\"Simply wrap your React app with the NextStepProvider and NextStepReact components. Add steps to NextStepReact.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"This makes it easy to add onboarding to any React application.\"]}]\n20:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 256 256\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M240,56V184a16,16,0,0,1-16,16H72V152h56V104h56V56Z\",\"opacity\":\"0.2\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M248,56a8,8,0,0,1-8,8H192v40a8,8,0,0,1-8,8H136v40a8,8,0,0,1-8,8H80v40a8,8,0,0,1-8,8H16a8,8,0,0,1,0-16H64V152a8,8,0,0,1,8-8h48V104a8,8,0,0,1,8-8h48V56a8,8,0,0,1,8-8h56A8,8,0,0,1,248,"])</script>
11<script>self.__next_f.push([1,"56Z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n21:[\"$\",\"p\",null,{\"children\":[\"Create your steps array. See\",\" \",[\"$\",\"a\",null,{\"className\":\"text-primary\",\"href\":\"/docs/react\",\"target\":\"_blank\",\"children\":\"docs\"}],\" \",\"for more details.\"]}]\n9f:T473,M226.063 24.22l-9.782 32.624c12.992-2.652 26.423-4.032 40.19-4.032 10.475 0 20.766.82 30.81 2.376l-9.405-30.97h-51.813zm30.406 48.843c-99.627 0-180.19 80.53-180.19 180.156 0 99.624 80.563 180.155 180.19 180.155 99.624 0 180.155-80.53 180.155-180.156 0-99.627-80.53-180.157-180.156-180.157zm0 41.687c76.482 0 138.467 61.985 138.467 138.47 0 76.482-61.985 138.5-138.468 138.5-76.485 0-138.5-62.018-138.5-138.5 0-76.485 62.015-138.47 138.5-138.47zm-.033 38.938c-54.96 0-99.53 44.54-99.53 99.5s44.57 99.5 99.53 99.5 99.5-44.54 99.5-99.5-44.54-99.5-99.5-99.5zm.032 39.687c33.052 0 59.842 26.79 59.842 59.844 0 33.052-26.79 59.843-59.843 59.843-33.055 0-59.845-26.79-59.845-59.844 0-33.055 26.79-59.845 59.844-59.845zm0 30.906c-15.993 0-28.97 12.947-28.97 28.94 0 15.99 12.977 28.968 28.97 28.968 15.99 0 28.936-12.977 28.936-28.97 0-15.99-12.945-28.937-28.937-28.937zM114.905 395l-27.844 92.875h46.876l20.28-62.313c-14.35-8.54-27.56-18.833-39.312-30.562zm277.188 5.688c-11.982 11.026-25.324 20.595-39.72 28.468l19.25 58.72h46.907l-26.436-87.188zm-165.03 50.78v36.407h52.092v-35.53c-7.45.84-15.015 1.28-22.687 1.28-9.99 0-19.81-.74-29.408-2.156z22:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$9f\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n23:\"You can target any element with ease, simply use same id with step's selector.\"\na0:T5b6,"])</script>
11<script>self.__next_f.push([1,"M196.375 18.25c3.91 19.165-.907 37.814-14.72 55.5-15.853 20.302-44.172 38.85-84.81 51.188-34.84 10.577-58.396 29.203-71 50.937-12.606 21.734-14.02 46.364-5.72 67.5 14.824 37.743 60.4 62.92 121.28 47.438 12.883-4.053 27.47-10 38.97-17.188 2.51-1.568 4.828-3.18 6.938-4.813-2.885-2.7-5.43-5.853-7.5-9.437-.683-1.182-1.297-2.385-1.844-3.594-13.048 8.047-29.743 16.232-51.532 19.376-47.934 8.963-78.497-12.01-88.938-38.594-6.257-15.93-5.374-34.287 4.5-51.312 9.874-17.025 29.002-32.94 60.28-42.438 43.283-13.14 75.046-33.17 94.095-57.562 15.77-20.194 22.4-43.702 18.906-67h-18.905zm17.844 151.47c-.788 0-1.588 0-2.376.03-11.464.415-23.03 3.582-33.656 9.72-26.423 15.252-39.106 44.164-34.25 72.25 12.21-4.294 22.097-10.274 30.906-16.157 1.418-11.078 7.93-21.27 18.72-27.5 6.337-3.66 13.285-5.464 20.124-5.5 13.055-.07 25.668 6.304 32.656 18.406 10.648 18.44 4.066 42.974-14.375 53.624-8.564 4.945-18.115 5.99-26.97 3.844-4.427 4.08-9.466 7.747-14.72 11.03-5.286 3.306-10.918 6.29-16.655 8.97 15.17 10.68 33.97 15.17 52.25 12.125h.03l72.376 125.406c17.27 29.907 42.53 48.207 68.783 54.467 26.25 6.26 52.74 1.16 74.25-12.03 43.02-26.38 66.36-87.515 33.53-144.376l-16.53-28.655-.157-.28c-19.615-36.032-45.045-60.504-75.344-75.283 12.778 45.916 17.4 91.832 16.094 137.75l28.688-34 4.906-3L443 348.72c21.954 38.025 3.593 72.716-21.125 87.874-35.704 16.537-62.567 12.018-84.625-23.125l-71.78-124.376c20.72-22.425 25.7-57.052 9.78-84.625-13-22.517-36.637-34.833-61.03-34.75z"])</script>
11<script>self.__next_f.push([1,"24:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$a0\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n25:[\"You can control NextStep with ease. Simply use\",\" \",[\"$\",\"span\",null,{\"className\":\"font-bold\",\"children\":\"useNextStep\"}],\" hook.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],[\"$\",\"a\",null,{\"className\":\"text-primary\",\"href\":\"/docs/react\",\"target\":\"_blank\",\"children\":\"Check docs\"}],\" \",\"for more details.\"]\na1:Ta12,"])</script>
11<script>self.__next_f.push([1,"M203.043 26.648c-8.893.062-17.672 1.326-26.193 3.873-8.454 2.53-16.242 6.197-23.31 10.867 7.722 19.622 27.435 44.53 50.27 65.793 23.842 22.202 51.18 41.065 68.835 49.572l.207.1.203.103c16.224 8.335 27.71 21.453 34.34 35.924 4.27 9.318 6.757 19.078 8.207 29 13-10.14 26.704-18.26 40.636-24.153-1.06-18.31-5.088-37.51-12.424-56.735-15.386-40.32-42.26-72.78-72.695-92.576-21.875-14.228-45.35-21.926-68.077-21.768zm-76.408 42.305c-5.113 7.934-9.306 16.78-12.492 26.387-10.64 32.074-9.777 72.308 5.61 112.63 9.312 24.403 22.837 45.92 38.81 63.5 15.736 4.708 31.3 11.982 45.92 21.852 11.296 7.627 21.362 16.357 30.085 25.852 2.847.692 5.695 1.282 8.54 1.746 5.42-14.138 12.455-28.204 21.124-41.85 5.353-8.424 11.116-16.354 17.21-23.757.072-5.192.03-10.223-.217-15.026-.67-12.99-2.75-24.1-6.56-32.414-3.808-8.314-8.77-14.122-18.06-18.894l.41.202c-22.878-11.025-51.447-31.172-77.74-55.655-20.9-19.46-40.288-41.258-52.64-64.574zm279.752 135.725c-13.507.11-27.796 3.247-42.252 9.248-30.84 12.802-61.806 38.75-84.71 74.797-11.717 18.442-20.137 37.67-25.372 56.523 20.55 34.478 25.597 74.082 10.793 107.342 2.417 3.444 5.08 6.657 7.986 9.613 21.644-18.674 46.588-34.143 64.316-50.028 9.69-8.68 17.027-17.275 21.104-25.46 4.077-8.187 5.48-15.697 3.36-25.923l-.124-.595-.082-.6c-8.053-58.294 6.075-92.552 26.664-113.51 16.556-16.85 33.036-25.725 44.405-37.442-8.214-2.73-16.972-4.04-26.088-3.965zm56.746 23.953c-16.63 20.67-37.133 30.217-49.383 42.686-14.076 14.328-23.793 31.575-16.715 83.104 3.408 17.52.413 34.346-6.558 48.342-7.097 14.247-17.71 25.832-29.305 36.222-17.613 15.782-37.93 29.296-54.926 42.48 19.275 5.007 41.22 2.584 63.565-6.693 30.84-12.8 61.808-38.75 84.71-74.797 22.905-36.048 33.24-75.107 31.728-108.463-1.156-25.51-9.035-47.368-23.115-62.88zm-66.098 125.79c-.06-.315-.108-.628-.174-.943l.208 1.193c-.01-.085-.02-.165-.033-.25zm-280.223-71.424c-18.383-.166-35.7 3.865-50.275 11.807.1.003.187.01.287.013 8.63.305 19.464-.713 31.938.99 12.473 1.704 27.085 7.368 38.154 19.893 11.07 12.524 18.66 30.28 23.947 55.78l.125.594.082.602c2.453 17.792 13.786 28.085 33.434 37.722 16.764 8.223 38.287 14.095 58.717 20.073 9.15-41-12.56-91.006-58.81-122.23-24.938-16.836-52.274-25.015-77.597-25.244zm-81.078 41.447c-25.27 43.53-5.004 107.405 50.106 144.612 54.225 36.61 119.786 32.276 151.34-5.7-18.436-5.254-39.336-11.22-58.53-20.634-24.75-12.14-48.34-32.54-53.1-64.222-4.533-21.7-10.59-33.28-15.61-38.96-5.04-5.707-8.97-7.095-16.05-8.06-7.08-.968-16.81-.277-28.333-.683-8.98-.316-19.516-1.605-29.823-6.352zm89.817 54.055c.022.1.044.192.065.293l-.207-1.196c.042.304.097.6.143.904z"])</script>
11<script>self.__next_f.push([1,"26:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$a1\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n27:\"If you like NextStep, please support the developer.\"\n28:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 576 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M552 64H88c-13.255 0-24 10.745-24 24v8H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h472c26.51 0 48-21.49 48-48V88c0-13.255-10.745-24-24-24zM56 400a8 8 0 0 1-8-8V144h16v248a8 8 0 0 1-8 8zm236-16H140c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm208 0H348c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm-208-96H140c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm208 0H348c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm0-96H140c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h360c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n29:[\"$\",\"p\",null,{\"children\":[\"We are continuously improving NextStep for all React-based frameworks. \",[\"$\",\"br\",null,{}],\" \",[\"$\",\"br\",null,{}],\"Sign up to hear about our latest updates.\"]}]\n2a:\"🎉🎉🎉\"\n2b:[\"Don't forget to leave a star on\",\" \",[\"$\",\"a\",null,{\"href\":\"https://github.com/enszrlu/NextStep\",\"target\":\"_blank\",\"className\":\"text-primary\",\"children\":\"GitHub\"}],\"!\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"⭐️⭐️⭐️⭐️⭐️\"]\n2c:\"👋\"\n2d:[\"$\",\"p\",null,{\"children\":[\"Onboarding never been easier! This is how card looks like without selector.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"You can use buttons or arrow keys to navigate through the tour.\"]}]\n2e:\"🚀\"\n2f:[\"$\",\"p\",null,{\"children\":\"NextStep integrates seamlessly with React Router for navigation.\"}]\n30:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"fill\":\"none\",\"d\":\"M0 0h24v24H0z\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M20 17H4V5h8V3H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h4v2h8v-2h4c1.1 0 2-.9 2-2v-3h-2z\",\"children\":[]}],[\"$\",\"path\",\"2\",{\"d\":\"m17 14 5-5-1.41-1.41L18 10.17V3h-2v7.17l-2.59-2.58L12 9z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n31:[\"$\",\"p\",null,{\"children\":\"Install NextStep using your favorite package manager.\"}]\n32:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M20 2H7C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h12c1.654 0 3-1.346 3-3s-1.346-3-3-3H6v2h13a1 1 0 0 1 0 2H7c-1.654 0-3-1.346-3-3s1.346-3 3-3h13c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 10H7a4.973 4.973 0 0 0-3 1.002V7c0-1.654 1.346-3 3-3h13v8z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n33:[\"$\",\"p\",null,{\"children\":[\"Use the React Router adapter to enable seamless navigation during tours.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"Simply import \",[\"$\",\"code\",null,{\"children\":\"useReactRouterAdapter\"}],\" from\",\" \",[\"$\",\"code\",null,{\"children\":\"nextstepjs/adapter
11s/react-router\"}],\" and pass it to the\",\" \",[\"$\",\"code\",null,{\"children\":\"navigationAdapter\"}],\" prop.\"]}]\n34:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 256 256\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M240,56V184a16,16,0,0,1-16,16H72V152h56V104h56V56Z\",\"opacity\":\"0.2\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M248,56a8,8,0,0,1-8,8H192v40a8,8,0,0,1-8,8H136v40a8,8,0,0,"])</script>
11<script>self.__next_f.push([1,"1-8,8H80v40a8,8,0,0,1-8,8H16a8,8,0,0,1,0-16H64V152a8,8,0,0,1,8-8h48V104a8,8,0,0,1,8-8h48V56a8,8,0,0,1,8-8h56A8,8,0,0,1,248,56Z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n35:[\"$\",\"p\",null,{\"children\":[\"Create your steps array. See\",\" \",[\"$\",\"a\",null,{\"className\":\"text-primary\",\"href\":\"/docs/react-router\",\"target\":\"_blank\",\"children\":\"docs\"}],\" \",\"for more details.\"]}]\na2:T473,M226.063 24.22l-9.782 32.624c12.992-2.652 26.423-4.032 40.19-4.032 10.475 0 20.766.82 30.81 2.376l-9.405-30.97h-51.813zm30.406 48.843c-99.627 0-180.19 80.53-180.19 180.156 0 99.624 80.563 180.155 180.19 180.155 99.624 0 180.155-80.53 180.155-180.156 0-99.627-80.53-180.157-180.156-180.157zm0 41.687c76.482 0 138.467 61.985 138.467 138.47 0 76.482-61.985 138.5-138.468 138.5-76.485 0-138.5-62.018-138.5-138.5 0-76.485 62.015-138.47 138.5-138.47zm-.033 38.938c-54.96 0-99.53 44.54-99.53 99.5s44.57 99.5 99.53 99.5 99.5-44.54 99.5-99.5-44.54-99.5-99.5-99.5zm.032 39.687c33.052 0 59.842 26.79 59.842 59.844 0 33.052-26.79 59.843-59.843 59.843-33.055 0-59.845-26.79-59.845-59.844 0-33.055 26.79-59.845 59.844-59.845zm0 30.906c-15.993 0-28.97 12.947-28.97 28.94 0 15.99 12.977 28.968 28.97 28.968 15.99 0 28.936-12.977 28.936-28.97 0-15.99-12.945-28.937-28.937-28.937zM114.905 395l-27.844 92.875h46.876l20.28-62.313c-14.35-8.54-27.56-18.833-39.312-30.562zm277.188 5.688c-11.982 11.026-25.324 20.595-39.72 28.468l19.25 58.72h46.907l-26.436-87.188zm-165.03 50.78v36.407h52.092v-35.53c-7.45.84-15.015 1.28-22.687 1.28-9.99 0-19.81-.74-29.408-2.156z36:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$a2\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n37:\"You can target any element with ease, simply use same id with step's selector.\"\na3:T5b6,"])</script>
11<script>self.__next_f.push([1,"M196.375 18.25c3.91 19.165-.907 37.814-14.72 55.5-15.853 20.302-44.172 38.85-84.81 51.188-34.84 10.577-58.396 29.203-71 50.937-12.606 21.734-14.02 46.364-5.72 67.5 14.824 37.743 60.4 62.92 121.28 47.438 12.883-4.053 27.47-10 38.97-17.188 2.51-1.568 4.828-3.18 6.938-4.813-2.885-2.7-5.43-5.853-7.5-9.437-.683-1.182-1.297-2.385-1.844-3.594-13.048 8.047-29.743 16.232-51.532 19.376-47.934 8.963-78.497-12.01-88.938-38.594-6.257-15.93-5.374-34.287 4.5-51.312 9.874-17.025 29.002-32.94 60.28-42.438 43.283-13.14 75.046-33.17 94.095-57.562 15.77-20.194 22.4-43.702 18.906-67h-18.905zm17.844 151.47c-.788 0-1.588 0-2.376.03-11.464.415-23.03 3.582-33.656 9.72-26.423 15.252-39.106 44.164-34.25 72.25 12.21-4.294 22.097-10.274 30.906-16.157 1.418-11.078 7.93-21.27 18.72-27.5 6.337-3.66 13.285-5.464 20.124-5.5 13.055-.07 25.668 6.304 32.656 18.406 10.648 18.44 4.066 42.974-14.375 53.624-8.564 4.945-18.115 5.99-26.97 3.844-4.427 4.08-9.466 7.747-14.72 11.03-5.286 3.306-10.918 6.29-16.655 8.97 15.17 10.68 33.97 15.17 52.25 12.125h.03l72.376 125.406c17.27 29.907 42.53 48.207 68.783 54.467 26.25 6.26 52.74 1.16 74.25-12.03 43.02-26.38 66.36-87.515 33.53-144.376l-16.53-28.655-.157-.28c-19.615-36.032-45.045-60.504-75.344-75.283 12.778 45.916 17.4 91.832 16.094 137.75l28.688-34 4.906-3L443 348.72c21.954 38.025 3.593 72.716-21.125 87.874-35.704 16.537-62.567 12.018-84.625-23.125l-71.78-124.376c20.72-22.425 25.7-57.052 9.78-84.625-13-22.517-36.637-34.833-61.03-34.75z"])</script>
11<script>self.__next_f.push([1,"38:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$a3\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n39:[\"You can control NextStep with ease. Simply use\",\" \",[\"$\",\"span\",null,{\"className\":\"font-bold\",\"children\":\"useNextStep\"}],\" hook.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],[\"$\",\"a\",null,{\"className\":\"text-primary\",\"href\":\"/docs/react-router\",\"target\":\"_blank\",\"children\":\"Check docs\"}],\" \",\"for more details.\"]\na4:Ta12,"])</script>
11<script>self.__next_f.push([1,"M203.043 26.648c-8.893.062-17.672 1.326-26.193 3.873-8.454 2.53-16.242 6.197-23.31 10.867 7.722 19.622 27.435 44.53 50.27 65.793 23.842 22.202 51.18 41.065 68.835 49.572l.207.1.203.103c16.224 8.335 27.71 21.453 34.34 35.924 4.27 9.318 6.757 19.078 8.207 29 13-10.14 26.704-18.26 40.636-24.153-1.06-18.31-5.088-37.51-12.424-56.735-15.386-40.32-42.26-72.78-72.695-92.576-21.875-14.228-45.35-21.926-68.077-21.768zm-76.408 42.305c-5.113 7.934-9.306 16.78-12.492 26.387-10.64 32.074-9.777 72.308 5.61 112.63 9.312 24.403 22.837 45.92 38.81 63.5 15.736 4.708 31.3 11.982 45.92 21.852 11.296 7.627 21.362 16.357 30.085 25.852 2.847.692 5.695 1.282 8.54 1.746 5.42-14.138 12.455-28.204 21.124-41.85 5.353-8.424 11.116-16.354 17.21-23.757.072-5.192.03-10.223-.217-15.026-.67-12.99-2.75-24.1-6.56-32.414-3.808-8.314-8.77-14.122-18.06-18.894l.41.202c-22.878-11.025-51.447-31.172-77.74-55.655-20.9-19.46-40.288-41.258-52.64-64.574zm279.752 135.725c-13.507.11-27.796 3.247-42.252 9.248-30.84 12.802-61.806 38.75-84.71 74.797-11.717 18.442-20.137 37.67-25.372 56.523 20.55 34.478 25.597 74.082 10.793 107.342 2.417 3.444 5.08 6.657 7.986 9.613 21.644-18.674 46.588-34.143 64.316-50.028 9.69-8.68 17.027-17.275 21.104-25.46 4.077-8.187 5.48-15.697 3.36-25.923l-.124-.595-.082-.6c-8.053-58.294 6.075-92.552 26.664-113.51 16.556-16.85 33.036-25.725 44.405-37.442-8.214-2.73-16.972-4.04-26.088-3.965zm56.746 23.953c-16.63 20.67-37.133 30.217-49.383 42.686-14.076 14.328-23.793 31.575-16.715 83.104 3.408 17.52.413 34.346-6.558 48.342-7.097 14.247-17.71 25.832-29.305 36.222-17.613 15.782-37.93 29.296-54.926 42.48 19.275 5.007 41.22 2.584 63.565-6.693 30.84-12.8 61.808-38.75 84.71-74.797 22.905-36.048 33.24-75.107 31.728-108.463-1.156-25.51-9.035-47.368-23.115-62.88zm-66.098 125.79c-.06-.315-.108-.628-.174-.943l.208 1.193c-.01-.085-.02-.165-.033-.25zm-280.223-71.424c-18.383-.166-35.7 3.865-50.275 11.807.1.003.187.01.287.013 8.63.305 19.464-.713 31.938.99 12.473 1.704 27.085 7.368 38.154 19.893 11.07 12.524 18.66 30.28 23.947 55.78l.125.594.082.602c2.453 17.792 13.786 28.085 33.434 37.722 16.764 8.223 38.287 14.095 58.717 20.073 9.15-41-12.56-91.006-58.81-122.23-24.938-16.836-52.274-25.015-77.597-25.244zm-81.078 41.447c-25.27 43.53-5.004 107.405 50.106 144.612 54.225 36.61 119.786 32.276 151.34-5.7-18.436-5.254-39.336-11.22-58.53-20.634-24.75-12.14-48.34-32.54-53.1-64.222-4.533-21.7-10.59-33.28-15.61-38.96-5.04-5.707-8.97-7.095-16.05-8.06-7.08-.968-16.81-.277-28.333-.683-8.98-.316-19.516-1.605-29.823-6.352zm89.817 54.055c.022.1.044.192.065.293l-.207-1.196c.042.304.097.6.143.904z"])</script>
11<script>self.__next_f.push([1,"3a:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$a4\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n3b:\"If you like NextStep, please support the developer.\"\n3c:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 576 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M552 64H88c-13.255 0-24 10.745-24 24v8H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h472c26.51 0 48-21.49 48-48V88c0-13.255-10.745-24-24-24zM56 400a8 8 0 0 1-8-8V144h16v248a8 8 0 0 1-8 8zm236-16H140c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm208 0H348c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm-208-96H140c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm208 0H348c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm0-96H140c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h360c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n3d:[\"$\",\"p\",null,{\"children\":[\"We are continuously improving NextStep for all React-based frameworks. \",[\"$\",\"br\",null,{}],\" \",[\"$\",\"br\",null,{}],\"Sign up to hear about our latest updates.\"]}]\n3e:\"🎉🎉🎉\"\n3f:[\"Don't forget to leave a star on\",\" \",[\"$\",\"a\",null,{\"href\":\"https://github.com/enszrlu/NextStep\",\"target\":\"_blank\",\"className\":\"text-primary\",\"children\":\"GitHub\"}],\"!\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"⭐️⭐️⭐️⭐️⭐️\"]\n40:\"👋\"\n41:[\"$\",\"p\",null,{\"children\":[\"Onboarding never been easier! This is how card looks like without selector.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"You can use buttons or arrow keys to navigate through the tour.\"]}]\n42:\"🚀\"\n43:[\"$\",\"p\",null,{\"children\":\"NextStep integrates seamlessly with Remix for navigation.\"}]\n44:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"fill\":\"none\",\"d\":\"M0 0h24v24H0z\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M20 17H4V5h8V3H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h4v2h8v-2h4c1.1 0 2-.9 2-2v-3h-2z\",\"children\":[]}],[\"$\",\"path\",\"2\",{\"d\":\"m17 14 5-5-1.41-1.41L18 10.17V3h-2v7.17l-2.59-2.58L12 9z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n45:[\"$\",\"p\",null,{\"children\":\"Install NextStep using your favorite package manager.\"}]\n46:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M20 2H7C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h12c1.654 0 3-1.346 3-3s-1.346-3-3-3H6v2h13a1 1 0 0 1 0 2H7c-1.654 0-3-1.346-3-3s1.346-3 3-3h13c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 10H7a4.973 4.973 0 0 0-3 1.002V7c0-1.654 1.346-3 3-3h13v8z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n47:[\"$\",\"p\",null,{\"children\":[\"Use the Remix adapter to enable seamless navigation during tours.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"Simply import \",[\"$\",\"code\",null,{\"children\":\"useRemixAdapter\"}],\" from\",\" \",[\"$\",\"code\",null,{\"children\":\"nextstepjs/adapters/remix\"}],\" and pass it to the\",\" \",[\"$\",\"code\",null,{\"children\":\"navigationAdapter\"}],\" prop.\"]}]\n48:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 256 256\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M240,56V184a16,16,0,0,1-16,16H72V152h56V104h56V56Z\",\"opacity\":\"0.2\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M248,56a8,8,0,0,1-8,8H192v40a8,8,0,0,1-8,8H136v40a8,8,0,0,1-8,8H80v40a8,8,0,0,1-8,8H1"])</script>
11<script>self.__next_f.push([1,"6a8,8,0,0,1,0-16H64V152a8,8,0,0,1,8-8h48V104a8,8,0,0,1,8-8h48V56a8,8,0,0,1,8-8h56A8,8,0,0,1,248,56Z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n49:[\"$\",\"p\",null,{\"children\":[\"Create your steps array. See\",\" \",[\"$\",\"a\",null,{\"className\":\"text-primary\",\"href\":\"/docs/remix\",\"target\":\"_blank\",\"children\":\"docs\"}],\" \",\"for more details.\"]}]\na5:T473,M226.063 24.22l-9.782 32.624c12.992-2.652 26.423-4.032 40.19-4.032 10.475 0 20.766.82 30.81 2.376l-9.405-30.97h-51.813zm30.406 48.843c-99.627 0-180.19 80.53-180.19 180.156 0 99.624 80.563 180.155 180.19 180.155 99.624 0 180.155-80.53 180.155-180.156 0-99.627-80.53-180.157-180.156-180.157zm0 41.687c76.482 0 138.467 61.985 138.467 138.47 0 76.482-61.985 138.5-138.468 138.5-76.485 0-138.5-62.018-138.5-138.5 0-76.485 62.015-138.47 138.5-138.47zm-.033 38.938c-54.96 0-99.53 44.54-99.53 99.5s44.57 99.5 99.53 99.5 99.5-44.54 99.5-99.5-44.54-99.5-99.5-99.5zm.032 39.687c33.052 0 59.842 26.79 59.842 59.844 0 33.052-26.79 59.843-59.843 59.843-33.055 0-59.845-26.79-59.845-59.844 0-33.055 26.79-59.845 59.844-59.845zm0 30.906c-15.993 0-28.97 12.947-28.97 28.94 0 15.99 12.977 28.968 28.97 28.968 15.99 0 28.936-12.977 28.936-28.97 0-15.99-12.945-28.937-28.937-28.937zM114.905 395l-27.844 92.875h46.876l20.28-62.313c-14.35-8.54-27.56-18.833-39.312-30.562zm277.188 5.688c-11.982 11.026-25.324 20.595-39.72 28.468l19.25 58.72h46.907l-26.436-87.188zm-165.03 50.78v36.407h52.092v-35.53c-7.45.84-15.015 1.28-22.687 1.28-9.99 0-19.81-.74-29.408-2.156z4a:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$a5\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n4b:\"You can target any element with ease, simply use same id with step's selector.\"\na6:T5b6,"])</script>
11<script>self.__next_f.push([1,"M196.375 18.25c3.91 19.165-.907 37.814-14.72 55.5-15.853 20.302-44.172 38.85-84.81 51.188-34.84 10.577-58.396 29.203-71 50.937-12.606 21.734-14.02 46.364-5.72 67.5 14.824 37.743 60.4 62.92 121.28 47.438 12.883-4.053 27.47-10 38.97-17.188 2.51-1.568 4.828-3.18 6.938-4.813-2.885-2.7-5.43-5.853-7.5-9.437-.683-1.182-1.297-2.385-1.844-3.594-13.048 8.047-29.743 16.232-51.532 19.376-47.934 8.963-78.497-12.01-88.938-38.594-6.257-15.93-5.374-34.287 4.5-51.312 9.874-17.025 29.002-32.94 60.28-42.438 43.283-13.14 75.046-33.17 94.095-57.562 15.77-20.194 22.4-43.702 18.906-67h-18.905zm17.844 151.47c-.788 0-1.588 0-2.376.03-11.464.415-23.03 3.582-33.656 9.72-26.423 15.252-39.106 44.164-34.25 72.25 12.21-4.294 22.097-10.274 30.906-16.157 1.418-11.078 7.93-21.27 18.72-27.5 6.337-3.66 13.285-5.464 20.124-5.5 13.055-.07 25.668 6.304 32.656 18.406 10.648 18.44 4.066 42.974-14.375 53.624-8.564 4.945-18.115 5.99-26.97 3.844-4.427 4.08-9.466 7.747-14.72 11.03-5.286 3.306-10.918 6.29-16.655 8.97 15.17 10.68 33.97 15.17 52.25 12.125h.03l72.376 125.406c17.27 29.907 42.53 48.207 68.783 54.467 26.25 6.26 52.74 1.16 74.25-12.03 43.02-26.38 66.36-87.515 33.53-144.376l-16.53-28.655-.157-.28c-19.615-36.032-45.045-60.504-75.344-75.283 12.778 45.916 17.4 91.832 16.094 137.75l28.688-34 4.906-3L443 348.72c21.954 38.025 3.593 72.716-21.125 87.874-35.704 16.537-62.567 12.018-84.625-23.125l-71.78-124.376c20.72-22.425 25.7-57.052 9.78-84.625-13-22.517-36.637-34.833-61.03-34.75z"])</script>
11<script>self.__next_f.push([1,"4c:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$a6\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n4d:[\"You can control NextStep with ease. Simply use\",\" \",[\"$\",\"span\",null,{\"className\":\"font-bold\",\"children\":\"useNextStep\"}],\" hook.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],[\"$\",\"a\",null,{\"className\":\"text-primary\",\"href\":\"/docs/remix\",\"target\":\"_blank\",\"children\":\"Check docs\"}],\" \",\"for more details.\"]\na7:Ta12,"])</script>
11<script>self.__next_f.push([1,"M203.043 26.648c-8.893.062-17.672 1.326-26.193 3.873-8.454 2.53-16.242 6.197-23.31 10.867 7.722 19.622 27.435 44.53 50.27 65.793 23.842 22.202 51.18 41.065 68.835 49.572l.207.1.203.103c16.224 8.335 27.71 21.453 34.34 35.924 4.27 9.318 6.757 19.078 8.207 29 13-10.14 26.704-18.26 40.636-24.153-1.06-18.31-5.088-37.51-12.424-56.735-15.386-40.32-42.26-72.78-72.695-92.576-21.875-14.228-45.35-21.926-68.077-21.768zm-76.408 42.305c-5.113 7.934-9.306 16.78-12.492 26.387-10.64 32.074-9.777 72.308 5.61 112.63 9.312 24.403 22.837 45.92 38.81 63.5 15.736 4.708 31.3 11.982 45.92 21.852 11.296 7.627 21.362 16.357 30.085 25.852 2.847.692 5.695 1.282 8.54 1.746 5.42-14.138 12.455-28.204 21.124-41.85 5.353-8.424 11.116-16.354 17.21-23.757.072-5.192.03-10.223-.217-15.026-.67-12.99-2.75-24.1-6.56-32.414-3.808-8.314-8.77-14.122-18.06-18.894l.41.202c-22.878-11.025-51.447-31.172-77.74-55.655-20.9-19.46-40.288-41.258-52.64-64.574zm279.752 135.725c-13.507.11-27.796 3.247-42.252 9.248-30.84 12.802-61.806 38.75-84.71 74.797-11.717 18.442-20.137 37.67-25.372 56.523 20.55 34.478 25.597 74.082 10.793 107.342 2.417 3.444 5.08 6.657 7.986 9.613 21.644-18.674 46.588-34.143 64.316-50.028 9.69-8.68 17.027-17.275 21.104-25.46 4.077-8.187 5.48-15.697 3.36-25.923l-.124-.595-.082-.6c-8.053-58.294 6.075-92.552 26.664-113.51 16.556-16.85 33.036-25.725 44.405-37.442-8.214-2.73-16.972-4.04-26.088-3.965zm56.746 23.953c-16.63 20.67-37.133 30.217-49.383 42.686-14.076 14.328-23.793 31.575-16.715 83.104 3.408 17.52.413 34.346-6.558 48.342-7.097 14.247-17.71 25.832-29.305 36.222-17.613 15.782-37.93 29.296-54.926 42.48 19.275 5.007 41.22 2.584 63.565-6.693 30.84-12.8 61.808-38.75 84.71-74.797 22.905-36.048 33.24-75.107 31.728-108.463-1.156-25.51-9.035-47.368-23.115-62.88zm-66.098 125.79c-.06-.315-.108-.628-.174-.943l.208 1.193c-.01-.085-.02-.165-.033-.25zm-280.223-71.424c-18.383-.166-35.7 3.865-50.275 11.807.1.003.187.01.287.013 8.63.305 19.464-.713 31.938.99 12.473 1.704 27.085 7.368 38.154 19.893 11.07 12.524 18.66 30.28 23.947 55.78l.125.594.082.602c2.453 17.792 13.786 28.085 33.434 37.722 16.764 8.223 38.287 14.095 58.717 20.073 9.15-41-12.56-91.006-58.81-122.23-24.938-16.836-52.274-25.015-77.597-25.244zm-81.078 41.447c-25.27 43.53-5.004 107.405 50.106 144.612 54.225 36.61 119.786 32.276 151.34-5.7-18.436-5.254-39.336-11.22-58.53-20.634-24.75-12.14-48.34-32.54-53.1-64.222-4.533-21.7-10.59-33.28-15.61-38.96-5.04-5.707-8.97-7.095-16.05-8.06-7.08-.968-16.81-.277-28.333-.683-8.98-.316-19.516-1.605-29.823-6.352zm89.817 54.055c.022.1.044.192.065.293l-.207-1.196c.042.304.097.6.143.904z"])</script>
11<script>self.__next_f.push([1,"4e:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$a7\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n4f:\"If you like NextStep, please support the developer.\"\n50:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 576 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M552 64H88c-13.255 0-24 10.745-24 24v8H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h472c26.51 0 48-21.49 48-48V88c0-13.255-10.745-24-24-24zM56 400a8 8 0 0 1-8-8V144h16v248a8 8 0 0 1-8 8zm236-16H140c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm208 0H348c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm-208-96H140c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm208 0H348c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm0-96H140c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h360c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n51:[\"$\",\"p\",null,{\"children\":[\"We are continuously improving NextStep for all React-based frameworks. \",[\"$\",\"br\",null,{}],\" \",[\"$\",\"br\",null,{}],\"Sign up to hear about our latest updates.\"]}]\n52:\"🎉🎉🎉\"\n53:[\"Don't forget to leave a star on\",\" \",[\"$\",\"a\",null,{\"href\":\"https://github.com/enszrlu/NextStep\",\"target\":\"_blank\",\"className\":\"text-primary\",\"children\":\"GitHub\"}],\"!\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"⭐️⭐️⭐️⭐️⭐️\"]\n54:\"👋\"\n55:[\"$\",\"p\",null,{\"children\":[\"This demo shows how to use NextStep in a variety of scenarios.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"You can use buttons or arrow keys to navigate through the tour.\"]}]\n56:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M90.53 23c-18.345 0-36.688 7.002-50.686 21-27.996 27.996-27.994 73.38 0 101.375 21.776 21.776 54.08 26.603 80.53 14.5l53.69 53.688c-21.425 19.696-44 38.257-67.44 55.937l30.126 30.125c18.734-22.545 37.953-44.474 57.844-65.53l169.594 169.593c-51.845 40.444-120.866 53.838-192.813 42.562L173 424.906 72.47 404.47l95.405 88.405 1.97-26c86.593 36.97 177.603 34.61 241.343-11.75l63.062 21.313-21.47-63.594c44.61-63.62 46.408-153.412 9.908-238.875l26.03-1.97-88.406-95.375 20.438 100.53 21.344-1.624c11.278 71.983-2.168 141.017-42.656 192.876l-169.782-169.75c21.075-20.34 42.93-39.665 65.78-57.72l-30.123-30.124c-17.015 24.154-35.673 46.66-55.688 67.813l-53.97-53.97C167.834 98.183 163.032 65.814 141.22 44c-14-13.998-32.343-21-50.69-21zm0 27.03c11.434.002 22.872 4.34 31.595 13.064 17.447 17.447 17.446 45.742 0 63.187-17.446 17.447-45.71 17.447-63.156 0-17.447-17.444-17.448-45.74 0-63.186C67.69 54.37 79.097 50.03 90.53 50.03z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n57:[\"$\",\"p\",null,{\"children\":\"You can anchor to any element in your app. Simply use the same id with step's selector.\"}]\n58:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M90.53 23c-18.345 0-36.688 7.002-50.686 21-27.996 27.996-27.994 73.38 0 101.375 21.776 21.776 54.08 26.603 80.53 14.5l53.69 53.688c-21.425 19.696-44 38.257-67.44 55.937l30.126 30.125c18.734-22.545 37.953-44.474 57.844-65.53l169.594 169.593c-51.845 40.444-120.866 53.838-192.813 42.562L173 424.906 72.47 404.47l95.405 88.405 1.97-26c86.593 36.97 177.603 34.61 241.343-11.75l63.062 21.313-21.47-63.594c44.61-63.62 46.408-153.412 9.908-238.875l26.03-1.97-88.406-95.375 20.438 100.53 21.344-1.624c11.278 7"])</script>
11<script>self.__next_f.push([1,"1.983-2.168 141.017-42.656 192.876l-169.782-169.75c21.075-20.34 42.93-39.665 65.78-57.72l-30.123-30.124c-17.015 24.154-35.673 46.66-55.688 67.813l-53.97-53.97C167.834 98.183 163.032 65.814 141.22 44c-14-13.998-32.343-21-50.69-21zm0 27.03c11.434.002 22.872 4.34 31.595 13.064 17.447 17.447 17.446 45.742 0 63.187-17.446 17.447-45.71 17.447-63.156 0-17.447-17.444-17.448-45.74 0-63.186C67.69 54.37 79.097 50.03 90.53 50.03z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n59:[\"$\",\"p\",null,{\"children\":\"You can place the card anywhere to selector. Simply change the side property of your step.\"}]\n5a:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M416 320h-96c-17.6 0-32-14.4-32-32s14.4-32 32-32h96s96-107 96-160-43-96-96-96-96 43-96 96c0 25.5 22.2 63.4 45.3 96H320c-52.9 0-96 43.1-96 96s43.1 96 96 96h96c17.6 0 32 14.4 32 32s-14.4 32-32 32H185.5c-16 24.8-33.8 47.7-47.3 64H416c52.9 0 96-43.1 96-96s-43.1-96-96-96zm0-256c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zM96 256c-53 0-96 43-96 96s96 160 96 160 96-107 96-160-43-96-96-96zm0 128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n5b:[\"$\",\"p\",null,{\"children\":[\"You can route to different pages during the tour. Simply provide nextRoute and prevRoute in the step.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"Pressing \\\"Next\\\" will take you to the home page.\"]}]\n5c:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 512 512\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M416 320h-96c-17.6 0-32-14.4-32-32s14.4-32 32-32h96s96-107 96-160-43-96-96-96-96 43-96 96c0 25.5 22.2 63.4 45.3 96H320c-52.9 0-96 43.1-96 96s43.1 96 96 96h96c17.6 0 32 14.4 32 32s-14.4 32-32 32H185.5c-16 24.8-33.8 47.7-47.3 64H416c52.9 0 96-43.1 96-96s-43.1-96-96-96zm0-256c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zM96 256c-53 0-96 43-96 96s96 160 96 160 96-107 96-160-43-96-96-96zm0 128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n5d:[\"$\",\"p\",null,{\"children\":[\"nextRoute brought you here from the demo page.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"Pressing \\\"Next\\\" will take you back to the demo page.\"]}]\n5e:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M20 2H7C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h12c1.654 0 3-1.346 3-3s-1.346-3-3-3H6v2h13a1 1 0 0 1 0 2H7c-1.654 0-3-1.346-3-3s1.346-3 3-3h13c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 10H7a4.973 4.973 0 0 0-3 1.002V7c0-1.654 1.346-3 3-3h13v8z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n5f:[\"$\",\"p\",null,{\"children\":[\"NextStep uses document body as default viewport.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"You can change this using NextStepViewport. This will be especially useful when the element is in a scrollable area.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"See next two steps to see how NextStepViewport works.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],[\"$\",\"$La8\",null,{\"className\":\"text-primary\",\"href\":\"/docs\",\"target\":\"_blank\",\"children\":[\"Docs\",\" \"]}],\"for more details.\"]}]\n60:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M20 2H7C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h12c1.654 0 3-1.346 3-3s-1.346-3-3-3H6v2h13a1 1 0 0 1 0 2H7c-1.654 0-3-1.346-3-3s1.346-3 3-3h13c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 10H7a4.973 4.973 0 0 0-3 1.002V7c0-1.654 1.346-3 3-3h13v8z\",\"childre"])</script>
11<script>self.__next_f.push([1,"n\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n61:[\"$\",\"p\",null,{\"children\":\"This is the default viewport. Scroll and see the results.\"}]\n62:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M20 2H7C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h12c1.654 0 3-1.346 3-3s-1.346-3-3-3H6v2h13a1 1 0 0 1 0 2H7c-1.654 0-3-1.346-3-3s1.346-3 3-3h13c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 10H7a4.973 4.973 0 0 0-3 1.002V7c0-1.654 1.346-3 3-3h13v8z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n63:[\"$\",\"p\",null,{\"children\":[\"This is with NextStepViewport. Scroll and see the results.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"As you can see selector sticks to the element even though it is in a scrollable area.\"]}]\n64:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M20 2H7C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h12c1.654 0 3-1.346 3-3s-1.346-3-3-3H6v2h13a1 1 0 0 1 0 2H7c-1.654 0-3-1.346-3-3s1.346-3 3-3h13c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 10H7a4.973 4.973 0 0 0-3 1.002V7c0-1.654 1.346-3 3-3h13v8z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n65:[\"$\",\"p\",null,{\"children\":\"Another example with both horizontal and vertical scroll.\"}]\n66:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"aria-hidden\":\"true\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n67:[\"$\",\"p\",null,{\"children\":[\"Check out the documentation to learn more about NextStep.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],[\"$\",\"a\",null,{\"className\":\"text-primary\",\"href\":\"/docs\",\"children\":\"Check docs\"}],\" \"]}]\n68:\"👋\"\n69:\"This is the first step of our demo tour\"\n6a:\"🎉\"\n6b:\"This is the second step of our demo tour\"\n6c:\"👋\"\n6d:\"This is the first step of our Next.js routing demo. Click next to navigate to the homepage.\"\n6e:\"❤️\"\n6f:[\"We've navigated to the homepage. Please consider supporting the developer if you find NextStep useful.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"Click next to navigate back to the routing documentation.\"]\n70:\"🎉\"\n71:\"We've navigated back to the routing documentation. You've completed the routing demo!\"\n72:\"👋\"\n73:\"This is the first step of our React routing demo. Click next to navigate to the homepage.\"\n74:\"❤️\"\n75:[\"We've navigated to the homepage. Please consider supporting the developer if you find NextStep useful.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"Click next to navigate back to the routing documentation.\"]\n76:\"🎉\"\n77:\"We've navigated back to the routing documentation. You've completed the routing demo!\"\n78:\"👋\"\n79:\"This is the first step of our React Router routing demo. Click next to navigate to the homepage.\"\n7a:\"❤️\"\n7b:[\"We've navigated to the homepage. Please consider supporting the developer if you find NextStep useful.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"Click next to navigate back to the routing documentation.\"]\n7c:\"🎉\"\n7d:\"We've navigated back to the routing documentation. You've completed the routing demo!\"\n7e:\"👋\"\n7f:\"This is the first step of our Remix routing demo. Click next to navigate to the homepage.\"\n80:\"❤️\"\n81:[\"We've navigated to the homepa"])</script>
11<script>self.__next_f.push([1,"ge. Please consider supporting the developer if you find NextStep useful.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"Click next to navigate back to the routing documentation.\"]\n82:\"🎉\"\n83:\"We've navigated back to the routing documentation. You've completed the routing demo!\"\n84:\"👋\"\n85:\"This is the first step of our sidebar demo\"\n86:\"👋\"\n87:[\"$\",\"p\",null,{\"children\":[\"This is the first step of our validation demo. Click next to navigate to the second step.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"First step's validation will run an async function for 1 second then return true.\"]}]\n88:\"🚀\"\n89:[\"$\",\"p\",null,{\"children\":[\"Second step's validation will check if the window width is larger than 768.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"If it is not, tour will not continue to the next step. Change window width to see the effect.\"]}]\n8a:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"fill\":\"none\",\"d\":\"M0 0h24v24H0z\",\"children\":[]}],[\"$\",\"path\",\"1\",{\"d\":\"M20 17H4V5h8V3H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h4v2h8v-2h4c1.1 0 2-.9 2-2v-3h-2z\",\"children\":[]}],[\"$\",\"path\",\"2\",{\"d\":\"m17 14 5-5-1.41-1.41L18 10.17V3h-2v7.17l-2.59-2.58L12 9z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n8b:[\"$\",\"p\",null,{\"children\":[\"Second step's validation will check if the window width is less than 768.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"If it is not, tour will not continue to the next step. Change window width to see the effect.\"]}]\n8c:[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M20 2H7C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h12c1.654 0 3-1.346 3-3s-1.346-3-3-3H6v2h13a1 1 0 0 1 0 2H7c-1.654 0-3-1.346-3-3s1.346-3 3-3h13c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 10H7a4.973 4.973 0 0 0-3 1.002V7c0-1.654 1.346-3 3-3h13v8z\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]\n8d:[\"$\",\"p\",null,{\"children\":[\"You can create your own validation logic. So options are limitless.\",[\"$\",\"br\",null,{}],[\"$\",\"br\",null,{}],\"You can check authentication, user permissions, form fill out, actions, so many more!\"]}]\n"])</script>
11<script>self.__next_f.push([1,"92:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background text-foreground flex flex-col\",\"children\":[[\"$\",\"$La9\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1 px-4\",\"children\":[\"$\",\"$Laa\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lab\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$Lac\",null,{}],[\"$\",\"$Lad\",null,{}]]}]\n"])</script>
11<script>self.__next_f.push([1,"93:[\"$\",\"$Lae\",null,{}]\n94:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$Laa\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lab\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n95:[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/2olu-5e8pelk_.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/1uiedjjmjne07.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"div\",null,{\"className\":\"container mx-auto flex-1 items-start md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10 h-full\",\"children\":[[\"$\",\"$Laf\",null,{}],[\"$\",\"aside\",null,{\"className\":\"fixed top-16 z-30 hidden w-full shrink-0 overflow-y-auto border-r md:sticky md:block h-full\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-full py-6 pl-2 pr-4 lg:py-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start gap-2 flex-col pb-6\",\"children\":[[\"$\",\"$Lb0\",null,{}],[\"$\",\"$Lb1\",null,{}]]}],[\"$\",\"$Lb2\",null,{}]]}]}],[\"$\",\"main\",null,{\"className\":\"relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_200px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto w-full min-w-0\",\"children\":[\"$\",\"$Laa\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lab\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}]]}]\n96:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$Laa\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lab\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\nb3:Tf09,"])</script>
11<script>self.__next_f.push([1,"M14.448 16.2394C13.8809 17.0412 13.2933 17.7714 12.7015 18.4146C14.3738 20.0375 15.9291 20.7975 16.792 20.2993C17.6549 19.8011 17.7744 18.0742 17.2051 15.8145C16.3521 16.0054 15.426 16.1492 14.448 16.2394ZM13.138 16.3265C12.7641 16.342 12.3845 16.3499 12.0003 16.3499C11.6161 16.3499 11.2365 16.342 10.8627 16.3265C11.2394 16.8188 11.6208 17.2749 12.0003 17.6905C12.3798 17.2749 12.7612 16.8188 13.138 16.3265ZM18.1787 8.43278C20.8434 9.19718 22.5837 10.4672 22.5837 11.9999C22.5837 13.5325 20.8434 14.8026 18.1787 15.567C18.8491 18.2569 18.6193 20.399 17.292 21.1653C15.9647 21.9316 13.9947 21.0595 12.0003 19.134C10.006 21.0595 8.03596 21.9316 6.70866 21.1653C5.38136 20.399 5.15158 18.2569 5.82195 15.567C3.15724 14.8026 1.41699 13.5325 1.41699 11.9999C1.41699 10.4672 3.15724 9.19718 5.82195 8.43278C5.15158 5.74288 5.38136 3.60075 6.70866 2.83443C8.03596 2.06811 10.006 2.94019 12.0003 4.86569C13.9947 2.94019 15.9647 2.06811 17.292 2.83443C18.6193 3.60075 18.8491 5.74288 18.1787 8.43278ZM17.2051 8.18527C17.7744 5.92558 17.6549 4.19865 16.792 3.70046C15.9291 3.20226 14.3738 3.96221 12.7015 5.58509C13.2933 6.2283 13.8809 6.95849 14.448 7.76031C15.426 7.85054 16.3521 7.99432 17.2051 8.18527ZM6.79554 15.8145C6.22624 18.0742 6.34577 19.8011 7.20866 20.2993C8.07155 20.7975 9.62688 20.0375 11.2992 18.4146C10.7073 17.7714 10.1197 17.0412 9.55262 16.2394C8.57467 16.1492 7.6485 16.0054 6.79554 15.8145ZM10.8627 7.67324C11.2365 7.65776 11.6161 7.64987 12.0003 7.64987C12.3845 7.64987 12.7641 7.65776 13.138 7.67324C12.7612 7.18096 12.3798 6.7248 12.0003 6.30922C11.6208 6.7248 11.2394 7.18096 10.8627 7.67324ZM9.55262 7.76031C10.1197 6.95849 10.7073 6.2283 11.2992 5.58509C9.62688 3.96221 8.07155 3.20226 7.20866 3.70046C6.34577 4.19865 6.22624 5.92558 6.79554 8.18527C7.6485 7.99432 8.57467 7.85054 9.55262 7.76031ZM13.8939 15.2797C14.2395 14.7728 14.5772 14.2366 14.9015 13.6749C15.2258 13.1131 15.5213 12.5526 15.7875 11.9999C15.5213 11.4471 15.2258 10.8866 14.9015 10.3249C14.5772 9.76311 14.2395 9.22694 13.8939 8.72005C13.2821 8.6742 12.649 8.64987 12.0003 8.64987C11.3517 8.64987 10.7185 8.6742 10.1067 8.72005C9.76112 9.22694 9.42347 9.76311 9.09914 10.3249C8.77481 10.8866 8.4793 11.4471 8.21312 11.9999C8.4793 12.5526 8.77481 13.1131 9.09914 13.6749C9.42347 14.2366 9.76112 14.7728 10.1067 15.2797C10.7185 15.3255 11.3517 15.3499 12.0003 15.3499C12.649 15.3499 13.2821 15.3255 13.8939 15.2797ZM15.1785 15.1484C15.7932 15.0683 16.3789 14.9661 16.9286 14.8452C16.7584 14.3087 16.5541 13.7504 16.3161 13.178C16.1426 13.5095 15.9596 13.8421 15.7675 14.1749C15.5754 14.5076 15.3788 14.8324 15.1785 15.1484ZM8.82218 8.85133C8.20747 8.93147 7.62174 9.03367 7.07208 9.15454C7.24223 9.691 7.44659 10.2494 7.68454 10.8218C7.85806 10.4903 8.04101 10.1576 8.23311 9.82487C8.42522 9.49212 8.62185 9.16736 8.82218 8.85133ZM7.07208 14.8452C7.62174 14.9661 8.20747 15.0683 8.82218 15.1484C8.62185 14.8324 8.42522 14.5076 8.23311 14.1749C8.04101 13.8421 7.85806 13.5095 7.68454 13.178C7.44659 13.7504 7.24223 14.3087 7.07208 14.8452ZM6.09439 14.6C6.35551 13.7659 6.69407 12.8919 7.10491 11.9999C6.69407 11.1078 6.35551 10.2339 6.09439 9.39969C3.85279 10.0365 2.41699 11.0035 2.41699 11.9999C2.41699 12.9962 3.85279 13.9632 6.09439 14.6ZM16.9286 9.15454C16.3789 9.03367 15.7932 8.93147 15.1785 8.85133C15.3788 9.16736 15.5754 9.49212 15.7675 9.82487C15.9596 10.1576 16.1426 10.4903 16.3161 10.8218C16.5541 10.2494 16.7584 9.691 16.9286 9.15454ZM17.9063 9.39969C17.6451 10.2339 17.3066 11.1078 16.8957 11.9999C17.3066 12.8919 17.6451 13.7659 17.9063 14.6C20.1479 13.9632 21.5837 12.9962 21.5837 11.9999C21.5837 11.0035 20.1479 10.0365 17.9063 9.39969ZM12.0003 13.879C10.9625 13.879 10.1212 13.0377 10.1212 11.9999C10.1212 10.962 10.9625 10.1207 12.0003 10.1207C13.0382 10.1207 13.8795 10.962 13.8795 11.9999C13.8795 13.0377 13.0382 13.879 12.0003 13.879Z"])</script>
11<script>self.__next_f.push([1,"97:[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-4\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-4xl font-semibold mb-2\",\"id\":\"getting-started\",\"children\":\"NextStep Installation\"}],[\"$\",\"p\",null,{\"className\":\"text-xl\",\"children\":[\"NextStep is very easy to install and set up. You can install it using your favorite package manager to your \",\"React\",\" project.\"]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-4\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold\",\"children\":\"Select your framework\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-4 flex-wrap\",\"children\":[[\"$\",\"div\",\"nextjs\",{\"className\":\"flex gap-4 p-4 bg-foreground/70 text-background rounded-md flex-col justify-center items-center\",\"children\":[\"$\",\"$La8\",null,{\"href\":\"/docs/nextjs\",\"className\":\"flex gap-4 h-24 w-24 rounded-md flex-col justify-center items-center\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"className\":\"w-10 h-10\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM15.9999 8H14.6499V12H15.9999V8ZM9.34609 9.70937L15.405 17.5379L16.4591 16.7293L9.68281 8H8V15.9969H9.34609V9.70937Z\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}],\"Next.js\"]}]}],[\"$\",\"div\",\"react\",{\"className\":\"flex gap-4 p-4 text-background rounded-md flex-col justify-center items-center ring-4 bg-foreground ring-primary\",\"children\":[\"$\",\"$La8\",null,{\"href\":\"/docs/react\",\"className\":\"flex gap-4 h-24 w-24 rounded-md flex-col justify-center items-center\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 24 24\",\"className\":\"w-10 h-10\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"$b3\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}],\"React\"]}]}],\"$Lb4\",\"$Lb5\"]}]]}],\"$Lb6\",\"$Lb7\",\"$Lb8\"]}],[\"$Lb9\",\"$Lba\",\"$Lbb\",\"$Lbc\"],\"$Lbd\"]}]\n"])</script>
11<script>self.__next_f.push([1,"be:[]\n98:\"$Wbe\"\n99:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lbf\",null,{\"children\":\"$Lc0\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lc1\",null,{\"children\":[\"$\",\"$c2\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Lc3\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n9b:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2dsexdsa-k_ye.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script>
11<script>self.__next_f.push([1,"c4:I[87168,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\",\"/_next/static/chunks/2olu-5e8pelk_.js\",\"/_next/static/chunks/1uiedjjmjne07.js\",\"/_next/static/chunks/3cqr80885sfrt.js\",\"/_next/static/chunks/42kxs6npjgpjt.js\",\"/_next/static/chunks/2enjo-gw_loy6.js\"],\"default\"]\nc5:I[66828,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\",\"/_next/static/chunks/2olu-5e8pelk_.js\",\"/_next/static/chunks/1uiedjjmjne07.js\",\"/_next/static/chunks/3cqr80885sfrt.js\",\"/_next/static/chunks/42kxs6npjgpjt.js\",\"/_next/static/chunks/2enjo-gw_loy6.js\"],\"default\"]\nc6:I[97367,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"OutletBoundary\"]\n"])</script>
11<script>self.__next_f.push([1,"b4:[\"$\",\"div\",\"react-router\",{\"className\":\"flex gap-4 p-4 bg-foreground/70 text-background rounded-md flex-col justify-center items-center\",\"children\":[\"$\",\"$La8\",null,{\"href\":\"/docs/react-router\",\"className\":\"flex gap-4 h-24 w-24 rounded-md flex-col justify-center items-center\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"role\":\"img\",\"viewBox\":\"0 0 24 24\",\"className\":\"w-10 h-10\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M12.118 5.466a2.306 2.306 0 00-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 00-1.613-.73zm-4.785 4.36a2.145 2.145 0 00-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 00-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}],\"React Router\"]}]}]\n"])</script>
11<script>self.__next_f.push([1,"b5:[\"$\",\"div\",\"remix\",{\"className\":\"flex gap-4 p-4 bg-foreground/70 text-background rounded-md flex-col justify-center items-center\",\"children\":[\"$\",\"$La8\",null,{\"href\":\"/docs/remix\",\"className\":\"flex gap-4 h-24 w-24 rounded-md flex-col justify-center items-center\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"role\":\"img\",\"viewBox\":\"0 0 24 24\",\"className\":\"w-10 h-10\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M21.511 18.508c.216 2.773.216 4.073.216 5.492H15.31c0-.309.006-.592.011-.878.018-.892.036-1.821-.109-3.698-.19-2.747-1.374-3.358-3.55-3.358H1.574v-5h10.396c2.748 0 4.122-.835 4.122-3.049 0-1.946-1.374-3.125-4.122-3.125H1.573V0h11.541c6.221 0 9.313 2.938 9.313 7.632 0 3.511-2.176 5.8-5.114 6.182 2.48.497 3.93 1.909 4.198 4.694ZM1.573 24v-3.727h6.784c1.133 0 1.379.84 1.379 1.342V24Z\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}],\"Remix\"]}]}]\nb6:[\"$\",\"div\",null,{\"id\":\"installation\",\"className\":\"flex flex-col gap-4\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold\",\"children\":\"Installation\"}],[\"$\",\"div\",null,{\"className\":\"w-fit\",\"children\":[\"$\",\"$Lc4\",null,{}]}],[\"$\",\"$Lc5\",null,{\"language\":\"bash\",\"code\":\"\\n# npm\\nnpm i nextstepjs motion\\n\\n# pnpm\\npnpm add nextstepjs motion\\n\\n# yarn\\nyarn add nextstepjs motion\\n\\n# bun\\nbun add nextstepjs motion\\n\"}]]}]\nb7:[\"$\",\"div\",null,{\"className\":\"p-4 bg-amber-100 dark:bg-amber-900/50 border border-amber-300 dark:border-amber-700 rounded-md\",\"children\":[[\"$\",\"p\",null,{\"className\":\"font-semibold text-amber-800 dark:text-amber-200\",\"children\":\"⚠️ Using Vite?\"}],[\"$\",\"p\",null,{\"className\":\"text-amber-700 dark:text-amber-300 mt-1\",\"children\":[\"If you're using Vite, you'll need additional configuration to mock\",\" \",[\"$\",\"code\",null,{\"className\":\"bg-amber-200 dark:bg-amber-800 px-1 rounded\",\"children\":\"next/navigation\"}],\". See the\",\" \",[\"$\",\"$La8\",null,{\"href\":\"/docs/react/basic-setup\",\"className\":\"underline font-medium\",\"children\":\"Basic Setup\"}],\" \",\"page for detailed instructions.\"]}]]}]\nb8:[\"$\",\"div\",null,{\"className\":\"flex self-end\",\"children\":[\"$\",\"$La8\",null,{\"href\":\"/docs/react/basic-setup\",\"children\":[\"$\",\"button\",null,{\"className\":\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"currentColor\",\"strokeWidth\":\"0\",\"viewBox\":\"0 0 448 512\",\"className\":\"w-4 h-4 mr-2\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z\",\"children\":[]}]]],\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}],\" Basic Setup\"]}]}]}]\nb9:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0h1cr6h7k2r3s.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\nba:[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/3cqr80885sfrt.js\",\"async\":true,\"nonce\":\"$undefined\"}]\nbb:[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/42kxs6npjgpjt.js\",\"async\":true,\"nonce\":\"$undefined\"}]\nbc:[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/2enjo-gw_loy6.js\",\"async\":true,\"nonce\":\"$undefined\"}]\nbd:[\"$\",\"$Lc6\",null,{\"children\":[\"$\",\"$c2\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@c7\"}]}]\n"])</script>
11<script>self.__next_f.push([1,"c0:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
11<script>self.__next_f.push([1,"c8:I[27201,[\"/_next/static/chunks/2t9b-28nxadmh.js\",\"/_next/static/chunks/44l554y32qz4i.js\",\"/_next/static/chunks/44p37290qsddb.js\",\"/_next/static/chunks/1c-59zifqwoa3.js\",\"/_next/static/chunks/3l10wonprphhy.js\",\"/_next/static/chunks/3zs314ain49wx.js\",\"/_next/static/chunks/3p11gbnz98ims.js\",\"/_next/static/chunks/2bvxi2ybc6-bg.js\"],\"IconMark\"]\n"])</script>
11<script>self.__next_f.push([1,"c3:[[\"$\",\"title\",\"0\",{\"children\":\"React Documentation - NextStepjs\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Documentation for NextStepjs for React. Learn how to implement user onboarding, interactive tutorials, and product tours in your React applications.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"application-name\",\"content\":\"NextStep\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"next.js onboarding library,react onboarding,nextstepjs,onboarding wizard,product tour,interactive tutorial,next.js tutorial,next.js product demo,onboarding component,onboarding flow,onboarding guide,React onboarding library,react onboarding wizard,next.js onboarding wizard,shadcn onboarding,react onboarding documentation,react product tours,react interactive tutorials,react user guides,react onboarding component\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://nextstepjs.com/docs/react\"}],[\"$\",\"meta\",\"5\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"6\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"NextStep - Lightweight Next.js / React Onboarding Library\"}],[\"$\",\"link\",\"7\",{\"href\":\"https://nextstepjs.com/ogThumbnail.png\",\"rel\":\"apple-touch-startup-image\"}],[\"$\",\"meta\",\"8\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"default\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:title\",\"content\":\"NextStep - Lightweight Next.js / React Onboarding Library\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"Easily create user friendly onboarding experiences with our lightweight onboarding library for Next.js / React. Step by step guides, product tours, and interactive walkthroughs for seemless user flows.\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://nextstepjs.com/docs/react\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:site_name\",\"content\":\"NextStep\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image\",\"content\":\"https://nextstepjs.com/ogThumbnail.png\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:alt\",\"content\":\"NextStep - Lightweight Next.js / React Onboarding Library\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:site\",\"content\":\"@AlexZDevs\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:creator\",\"content\":\"@AlexZDevs\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:title\",\"content\":\"NextStep - Next.js / React Onboarding Library\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:description\",\"content\":\"Easily create user friendly onboarding experiences with our lightweight onboarding library for Next.js / React. Step by step guides, product tours, and interactive walkthroughs for seemless user flows.\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:image\",\"content\":\"https://nextstepjs.com/xThumbnail.png\"}],[\"$\",\"link\",\"25\",{\"rel\":\"shortcut icon\",\"href\":\"https://nextstepjs.com/icon.png\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"https://nextstepjs.com/icon.png\"}],[\"$\",\"link\",\"27\",{\"rel\":\"apple-touch-icon\",\"href\":\"https://nextstepjs.com/icon.png\"}],[\"$\",\"$Lc8\",\"28\",{}]]\n"])</script>
11<script>self.__next_f.push([1,"c7:null\n"])</script>
11<!-- Cloudflare Pages Analytics -->
vendor: 99 bytes, line 11
11<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "
11a33eb9a564504a79bd49ade691d37e6b
vendor: 13 bytes, line 11
11"}'></script>
11<!-- Cloudflare Pages Analytics -->
11<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"ffb156683d894d798a14b2b087f87f21","r":1,"spa":2}' crossorigin="anonymous"></script>
11
12</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.