[{"data":1,"prerenderedAt":1089},["ShallowReactive",2],{"navigation":3,"/getting-started/introduction":272,"/getting-started/introduction-surround":1086},[4,22,59,95,120,161,183,200,243,264],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","01.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Introduction","/getting-started/introduction","01.getting-started/1.introduction",{"title":15,"path":16,"stem":17},"Installation","/getting-started/installation","01.getting-started/2.installation",{"title":19,"path":20,"stem":21},"Quick Start","/getting-started/quick-start","01.getting-started/3.quick-start",{"title":23,"path":24,"stem":25,"children":26,"page":6},"Configuration","/configuration","02.configuration",[27,31,35,39,43,47,51,55],{"title":28,"path":29,"stem":30},"Overview","/configuration/overview","02.configuration/1.overview",{"title":32,"path":33,"stem":34},"Size","/configuration/size","02.configuration/2.size",{"title":36,"path":37,"stem":38},"Steps","/configuration/steps","02.configuration/3.steps",{"title":40,"path":41,"stem":42},"Placement","/configuration/placement","02.configuration/4.placement",{"title":44,"path":45,"stem":46},"Animation","/configuration/animation","02.configuration/5.animation",{"title":48,"path":49,"stem":50},"Scroll","/configuration/scroll","02.configuration/6.scroll",{"title":52,"path":53,"stem":54},"Skip","/configuration/skip","02.configuration/7.skip",{"title":56,"path":57,"stem":58},"Styles","/configuration/styles","02.configuration/8.styles",{"title":60,"path":61,"stem":62,"children":63,"page":6},"Components","/components","03.components",[64,68,72,76,80,84,88,91],{"title":65,"path":66,"stem":67},"Container","/components/container","03.components/1.container",{"title":69,"path":70,"stem":71},"Overlay","/components/overlay","03.components/2.overlay",{"title":73,"path":74,"stem":75},"Tooltip","/components/tooltip","03.components/3.tooltip",{"title":77,"path":78,"stem":79},"Image","/components/image","03.components/4.image",{"title":81,"path":82,"stem":83},"Buttons","/components/buttons","03.components/5.buttons",{"title":85,"path":86,"stem":87},"Progress","/components/progress","03.components/6.progress",{"title":52,"path":89,"stem":90},"/components/skip","03.components/7.skip",{"title":92,"path":93,"stem":94},"Close Button","/components/close-button","03.components/8.close-button",{"title":96,"path":97,"stem":98,"children":99,"page":6},"Features","/features","04.features",[100,104,108,112,116],{"title":101,"path":102,"stem":103},"Visibility","/features/visibility","04.features/1.visibility",{"title":105,"path":106,"stem":107},"Responsive","/features/responsive","04.features/2.responsive",{"title":109,"path":110,"stem":111},"Keyboard","/features/keyboard","04.features/3.keyboard",{"title":113,"path":114,"stem":115},"Highlight","/features/highlight","04.features/4.highlight",{"title":117,"path":118,"stem":119},"Overrides","/features/overrides","04.features/5.overrides",{"title":121,"path":122,"stem":123,"children":124,"page":6},"API Reference","/api-reference","05.api-reference",[125,129,133,137,141,145,149,153,157],{"title":126,"path":127,"stem":128},"useBorda","/api-reference/use-borda","05.api-reference/1.use-borda",{"title":130,"path":131,"stem":132},"useConfig","/api-reference/use-config","05.api-reference/2.use-config",{"title":134,"path":135,"stem":136},"useHighlight","/api-reference/use-highlight","05.api-reference/3.use-highlight",{"title":138,"path":139,"stem":140},"Borda Instance","/api-reference/borda-instance","05.api-reference/4.borda-instance",{"title":142,"path":143,"stem":144},"Controller API","/api-reference/controller-api","05.api-reference/5.controller-api",{"title":146,"path":147,"stem":148},"Events API","/api-reference/events-api","05.api-reference/6.events-api",{"title":150,"path":151,"stem":152},"Visibility API","/api-reference/visibility-api","05.api-reference/7.visibility-api",{"title":154,"path":155,"stem":156},"Skip API","/api-reference/skip-api","05.api-reference/8.skip-api",{"title":158,"path":159,"stem":160},"Scroll API","/api-reference/scroll-api","05.api-reference/9.scroll-api",{"title":162,"path":163,"stem":164,"children":165,"page":6},"Events","/events","06.events",[166,170,174,177,180],{"title":167,"path":168,"stem":169},"Tour","/events/tour","06.events/1.tour",{"title":171,"path":172,"stem":173},"Widget","/events/widget","06.events/2.widget",{"title":52,"path":175,"stem":176},"/events/skip","06.events/3.skip",{"title":101,"path":178,"stem":179},"/events/visibility","06.events/4.visibility",{"title":109,"path":181,"stem":182},"/events/keyboard","06.events/5.keyboard",{"title":184,"path":185,"stem":186,"children":187,"page":6},"Custom Element","/custom-element","07.custom-element",[188,192,196],{"title":189,"path":190,"stem":191},"Setup","/custom-element/setup","07.custom-element/1.setup",{"title":193,"path":194,"stem":195},"Usage","/custom-element/usage","07.custom-element/2.usage",{"title":197,"path":198,"stem":199},"DOM Events","/custom-element/events","07.custom-element/3.events",{"title":201,"path":202,"stem":203,"children":204,"page":6},"Examples","/examples","08.examples",[205,209,213,217,220,223,226,229,233,236,240],{"title":206,"path":207,"stem":208},"Basic Setup","/examples/basic-setup","08.examples/01.basic-setup",{"title":210,"path":211,"stem":212},"Multi-step","/examples/multi-step","08.examples/02.multi-step",{"title":214,"path":215,"stem":216},"Custom Styling","/examples/custom-styling","08.examples/03.custom-styling",{"title":113,"path":218,"stem":219},"/examples/highlight","08.examples/04.highlight",{"title":105,"path":221,"stem":222},"/examples/responsive","08.examples/05.responsive",{"title":117,"path":224,"stem":225},"/examples/overrides","08.examples/06.overrides",{"title":109,"path":227,"stem":228},"/examples/keyboard","08.examples/07.keyboard",{"title":230,"path":231,"stem":232},"Don't Show Again","/examples/skip","08.examples/08.skip",{"title":44,"path":234,"stem":235},"/examples/animation","08.examples/09.animation",{"title":237,"path":238,"stem":239},"Transition","/examples/transition","08.examples/10.transition",{"title":85,"path":241,"stem":242},"/examples/progress","08.examples/11.progress",{"title":244,"path":245,"stem":246,"children":247,"page":6},"Distribution","/distribution","09.distribution",[248,252,256,260],{"title":249,"path":250,"stem":251},"Formats","/distribution/formats","09.distribution/1.formats",{"title":253,"path":254,"stem":255},"Browser Support","/distribution/browser-support","09.distribution/2.browser-support",{"title":257,"path":258,"stem":259},"Bundle Size","/distribution/bundle-size","09.distribution/3.bundle-size",{"title":261,"path":262,"stem":263},"TypeScript","/distribution/typescript","09.distribution/4.typescript",{"title":265,"path":266,"stem":267,"children":268,"page":6},"Accessibility","/accessibility","10.accessibility",[269],{"title":28,"path":270,"stem":271},"/accessibility/overview","10.accessibility/1.overview",{"id":273,"title":11,"body":274,"description":1080,"extension":1081,"links":1082,"meta":1083,"navigation":415,"path":12,"seo":1084,"stem":13,"__hash__":1085},"docs/01.getting-started/1.introduction.md",{"type":275,"value":276,"toc":1074},"minimark",[277,282,290,298,309,322,326,352,359,970,980,983,1048,1051,1058,1070],[278,279,281],"h2",{"id":280},"what-is-borda","What is Borda?",[283,284,286],"div",{"id":285},"what-is-borda-description",[287,288,289],"p",{},"Borda is an embeddable onboarding widget that guides users through your interface step by step. It renders a spotlight overlay around target elements, paired with a tooltip that displays a title, description, image, and navigation buttons — all configurable per step.",[287,291,292,293,297],{},"Borda works on any type of site — SaaS dashboards, landing pages, e-commerce stores, documentation portals — without requiring a specific framework. The widget mounts into any container or directly into ",[294,295,296],"code",{},"document.body"," as a floating overlay.",[287,299,300,301,308],{},"Built with ",[302,303,307],"a",{"href":304,"rel":305},"https://svelte.dev",[306],"nofollow","Svelte 5",", Borda compiles down to vanilla JavaScript with no framework runtime. The output integrates into React, Vue, Angular, or plain HTML without dependency conflicts. Distribution formats include ES Module, UMD, and CommonJS.",[310,311,313],"callout",{"color":312},"info",[287,314,315,316,321],{},"Borda is a fully open-source, non-commercial project. It's built and maintained by a small team in their free time with the goal of helping developers build better projects. If you encounter bugs or rough edges — we'd appreciate your patience and a ",[302,317,320],{"href":318,"rel":319},"https://github.com/use-retoo/borda",[306],"GitHub issue"," over frustration.",[278,323,325],{"id":324},"see-it-in-action","See it in action",[287,327,328,329,332,333,336,337,340,341,344,345,348,349,351],{},"The only required field is ",[294,330,331],{},"steps"," — an array of step definitions. Each step specifies a ",[294,334,335],{},"target"," element, a ",[294,338,339],{},"title",", a ",[294,342,343],{},"description",", and a ",[294,346,347],{},"placement"," for the tooltip. This tour runs on the page you're reading right now: every target below is a real heading or feature card further down, and each step uses a different ",[294,350,347],{}," to show the tooltip positioning itself around its target.",[353,354,355],"borda-container",{},[356,357],"borda-component",{":config":358},"{\"steps\":[{\"target\":\"#page-header\",\"title\":\"Page header\",\"description\":\"Every page has a header with a title and description — Borda spotlights it as the starting point of the tour.\",\"placement\":\"bottom-center\"},{\"target\":\"#what-is-borda\",\"title\":\"What is Borda?\",\"description\":\"The first section heading on the page. Borda can target any element with a CSS selector — headings, paragraphs, cards, or containers.\",\"placement\":\"bottom-start\"},{\"target\":\"#what-is-borda-description\",\"title\":\"Description\",\"description\":\"A paragraph of text right below the heading. The spotlight wraps around just this block — not the whole section.\",\"placement\":\"bottom-start\"},{\"target\":\"#features\",\"title\":\"Features\",\"description\":\"The entire Features section — field cards, icons, and descriptions — wrapped in a single spotlight. One step can cover a large area.\",\"placement\":\"middle-start\"},{\"target\":\"#bundle-size\",\"title\":\"Bundle size\",\"description\":\"~42 KB gzipped. Zero runtime dependencies. The spotlight moves to the bottom of the page for this step.\",\"placement\":\"top-start\"},{\"target\":\"#bundle-callout\",\"title\":\"Full breakdown\",\"description\":\"Callouts, links, and inline elements are valid targets too. This one links to the full bundle size reference.\",\"placement\":\"top-center\"}],\"tourProgress\":{\"variant\":\"dots\"}}",[360,361,366],"pre",{"className":362,"code":363,"language":364,"meta":365,"style":365},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useBorda, ComponentPlacement } from '@retoo/borda';\n\nimport '@retoo/borda/styles';\n\nconst borda = useBorda();\n\nconst instance = await borda.mount({\n  steps: [\n    {\n      target: '#page-header',\n      title: 'Page header',\n      description: 'Every page has a header with a title and description — Borda spotlights it as the starting point of the tour.',\n      placement: ComponentPlacement.BOTTOM_CENTER,\n    },\n    {\n      target: '#what-is-borda',\n      title: 'What is Borda?',\n      description: 'The first section heading on the page. Borda can target any element with a CSS selector.',\n      placement: ComponentPlacement.BOTTOM_START,\n    },\n    {\n      target: '#what-is-borda-description',\n      title: 'Description',\n      description: 'A paragraph of text right below the heading. The spotlight wraps around just this block.',\n      placement: ComponentPlacement.BOTTOM_START,\n    },\n    {\n      target: '#features',\n      title: 'Features',\n      description: 'The entire Features section wrapped in a single spotlight. One step can cover a large area.',\n      placement: ComponentPlacement.MIDDLE_START,\n    },\n    {\n      target: '#bundle-size',\n      title: 'Bundle size',\n      description: '~42 KB gzipped. Zero runtime dependencies.',\n      placement: ComponentPlacement.TOP_START,\n    },\n    {\n      target: '#bundle-callout',\n      title: 'Full breakdown',\n      description: 'Callouts, links, and inline elements are valid targets too.',\n      placement: ComponentPlacement.TOP_CENTER,\n    },\n  ],\n});\n","ts","",[294,367,368,410,417,431,436,457,462,490,503,509,527,544,561,578,584,589,605,620,636,652,657,662,678,694,710,725,730,735,751,766,782,798,803,808,824,840,856,872,877,882,898,914,930,946,951,959],{"__ignoreMap":365},[369,370,373,377,381,385,388,391,394,397,400,404,407],"span",{"class":371,"line":372},"line",1,[369,374,376],{"class":375},"s7zQu","import",[369,378,380],{"class":379},"sMK4o"," {",[369,382,384],{"class":383},"sTEyZ"," useBorda",[369,386,387],{"class":379},",",[369,389,390],{"class":383}," ComponentPlacement",[369,392,393],{"class":379}," }",[369,395,396],{"class":375}," from",[369,398,399],{"class":379}," '",[369,401,403],{"class":402},"sfazB","@retoo/borda",[369,405,406],{"class":379},"'",[369,408,409],{"class":379},";\n",[369,411,413],{"class":371,"line":412},2,[369,414,416],{"emptyLinePlaceholder":415},true,"\n",[369,418,420,422,424,427,429],{"class":371,"line":419},3,[369,421,376],{"class":375},[369,423,399],{"class":379},[369,425,426],{"class":402},"@retoo/borda/styles",[369,428,406],{"class":379},[369,430,409],{"class":379},[369,432,434],{"class":371,"line":433},4,[369,435,416],{"emptyLinePlaceholder":415},[369,437,439,443,446,449,452,455],{"class":371,"line":438},5,[369,440,442],{"class":441},"spNyl","const",[369,444,445],{"class":383}," borda ",[369,447,448],{"class":379},"=",[369,450,384],{"class":451},"s2Zo4",[369,453,454],{"class":383},"()",[369,456,409],{"class":379},[369,458,460],{"class":371,"line":459},6,[369,461,416],{"emptyLinePlaceholder":415},[369,463,465,467,470,472,475,478,481,484,487],{"class":371,"line":464},7,[369,466,442],{"class":441},[369,468,469],{"class":383}," instance ",[369,471,448],{"class":379},[369,473,474],{"class":375}," await",[369,476,477],{"class":383}," borda",[369,479,480],{"class":379},".",[369,482,483],{"class":451},"mount",[369,485,486],{"class":383},"(",[369,488,489],{"class":379},"{\n",[369,491,493,497,500],{"class":371,"line":492},8,[369,494,496],{"class":495},"swJcz","  steps",[369,498,499],{"class":379},":",[369,501,502],{"class":383}," [\n",[369,504,506],{"class":371,"line":505},9,[369,507,508],{"class":379},"    {\n",[369,510,512,515,517,519,522,524],{"class":371,"line":511},10,[369,513,514],{"class":495},"      target",[369,516,499],{"class":379},[369,518,399],{"class":379},[369,520,521],{"class":402},"#page-header",[369,523,406],{"class":379},[369,525,526],{"class":379},",\n",[369,528,530,533,535,537,540,542],{"class":371,"line":529},11,[369,531,532],{"class":495},"      title",[369,534,499],{"class":379},[369,536,399],{"class":379},[369,538,539],{"class":402},"Page header",[369,541,406],{"class":379},[369,543,526],{"class":379},[369,545,547,550,552,554,557,559],{"class":371,"line":546},12,[369,548,549],{"class":495},"      description",[369,551,499],{"class":379},[369,553,399],{"class":379},[369,555,556],{"class":402},"Every page has a header with a title and description — Borda spotlights it as the starting point of the tour.",[369,558,406],{"class":379},[369,560,526],{"class":379},[369,562,564,567,569,571,573,576],{"class":371,"line":563},13,[369,565,566],{"class":495},"      placement",[369,568,499],{"class":379},[369,570,390],{"class":383},[369,572,480],{"class":379},[369,574,575],{"class":383},"BOTTOM_CENTER",[369,577,526],{"class":379},[369,579,581],{"class":371,"line":580},14,[369,582,583],{"class":379},"    },\n",[369,585,587],{"class":371,"line":586},15,[369,588,508],{"class":379},[369,590,592,594,596,598,601,603],{"class":371,"line":591},16,[369,593,514],{"class":495},[369,595,499],{"class":379},[369,597,399],{"class":379},[369,599,600],{"class":402},"#what-is-borda",[369,602,406],{"class":379},[369,604,526],{"class":379},[369,606,608,610,612,614,616,618],{"class":371,"line":607},17,[369,609,532],{"class":495},[369,611,499],{"class":379},[369,613,399],{"class":379},[369,615,281],{"class":402},[369,617,406],{"class":379},[369,619,526],{"class":379},[369,621,623,625,627,629,632,634],{"class":371,"line":622},18,[369,624,549],{"class":495},[369,626,499],{"class":379},[369,628,399],{"class":379},[369,630,631],{"class":402},"The first section heading on the page. Borda can target any element with a CSS selector.",[369,633,406],{"class":379},[369,635,526],{"class":379},[369,637,639,641,643,645,647,650],{"class":371,"line":638},19,[369,640,566],{"class":495},[369,642,499],{"class":379},[369,644,390],{"class":383},[369,646,480],{"class":379},[369,648,649],{"class":383},"BOTTOM_START",[369,651,526],{"class":379},[369,653,655],{"class":371,"line":654},20,[369,656,583],{"class":379},[369,658,660],{"class":371,"line":659},21,[369,661,508],{"class":379},[369,663,665,667,669,671,674,676],{"class":371,"line":664},22,[369,666,514],{"class":495},[369,668,499],{"class":379},[369,670,399],{"class":379},[369,672,673],{"class":402},"#what-is-borda-description",[369,675,406],{"class":379},[369,677,526],{"class":379},[369,679,681,683,685,687,690,692],{"class":371,"line":680},23,[369,682,532],{"class":495},[369,684,499],{"class":379},[369,686,399],{"class":379},[369,688,689],{"class":402},"Description",[369,691,406],{"class":379},[369,693,526],{"class":379},[369,695,697,699,701,703,706,708],{"class":371,"line":696},24,[369,698,549],{"class":495},[369,700,499],{"class":379},[369,702,399],{"class":379},[369,704,705],{"class":402},"A paragraph of text right below the heading. The spotlight wraps around just this block.",[369,707,406],{"class":379},[369,709,526],{"class":379},[369,711,713,715,717,719,721,723],{"class":371,"line":712},25,[369,714,566],{"class":495},[369,716,499],{"class":379},[369,718,390],{"class":383},[369,720,480],{"class":379},[369,722,649],{"class":383},[369,724,526],{"class":379},[369,726,728],{"class":371,"line":727},26,[369,729,583],{"class":379},[369,731,733],{"class":371,"line":732},27,[369,734,508],{"class":379},[369,736,738,740,742,744,747,749],{"class":371,"line":737},28,[369,739,514],{"class":495},[369,741,499],{"class":379},[369,743,399],{"class":379},[369,745,746],{"class":402},"#features",[369,748,406],{"class":379},[369,750,526],{"class":379},[369,752,754,756,758,760,762,764],{"class":371,"line":753},29,[369,755,532],{"class":495},[369,757,499],{"class":379},[369,759,399],{"class":379},[369,761,96],{"class":402},[369,763,406],{"class":379},[369,765,526],{"class":379},[369,767,769,771,773,775,778,780],{"class":371,"line":768},30,[369,770,549],{"class":495},[369,772,499],{"class":379},[369,774,399],{"class":379},[369,776,777],{"class":402},"The entire Features section wrapped in a single spotlight. One step can cover a large area.",[369,779,406],{"class":379},[369,781,526],{"class":379},[369,783,785,787,789,791,793,796],{"class":371,"line":784},31,[369,786,566],{"class":495},[369,788,499],{"class":379},[369,790,390],{"class":383},[369,792,480],{"class":379},[369,794,795],{"class":383},"MIDDLE_START",[369,797,526],{"class":379},[369,799,801],{"class":371,"line":800},32,[369,802,583],{"class":379},[369,804,806],{"class":371,"line":805},33,[369,807,508],{"class":379},[369,809,811,813,815,817,820,822],{"class":371,"line":810},34,[369,812,514],{"class":495},[369,814,499],{"class":379},[369,816,399],{"class":379},[369,818,819],{"class":402},"#bundle-size",[369,821,406],{"class":379},[369,823,526],{"class":379},[369,825,827,829,831,833,836,838],{"class":371,"line":826},35,[369,828,532],{"class":495},[369,830,499],{"class":379},[369,832,399],{"class":379},[369,834,835],{"class":402},"Bundle size",[369,837,406],{"class":379},[369,839,526],{"class":379},[369,841,843,845,847,849,852,854],{"class":371,"line":842},36,[369,844,549],{"class":495},[369,846,499],{"class":379},[369,848,399],{"class":379},[369,850,851],{"class":402},"~42 KB gzipped. Zero runtime dependencies.",[369,853,406],{"class":379},[369,855,526],{"class":379},[369,857,859,861,863,865,867,870],{"class":371,"line":858},37,[369,860,566],{"class":495},[369,862,499],{"class":379},[369,864,390],{"class":383},[369,866,480],{"class":379},[369,868,869],{"class":383},"TOP_START",[369,871,526],{"class":379},[369,873,875],{"class":371,"line":874},38,[369,876,583],{"class":379},[369,878,880],{"class":371,"line":879},39,[369,881,508],{"class":379},[369,883,885,887,889,891,894,896],{"class":371,"line":884},40,[369,886,514],{"class":495},[369,888,499],{"class":379},[369,890,399],{"class":379},[369,892,893],{"class":402},"#bundle-callout",[369,895,406],{"class":379},[369,897,526],{"class":379},[369,899,901,903,905,907,910,912],{"class":371,"line":900},41,[369,902,532],{"class":495},[369,904,499],{"class":379},[369,906,399],{"class":379},[369,908,909],{"class":402},"Full breakdown",[369,911,406],{"class":379},[369,913,526],{"class":379},[369,915,917,919,921,923,926,928],{"class":371,"line":916},42,[369,918,549],{"class":495},[369,920,499],{"class":379},[369,922,399],{"class":379},[369,924,925],{"class":402},"Callouts, links, and inline elements are valid targets too.",[369,927,406],{"class":379},[369,929,526],{"class":379},[369,931,933,935,937,939,941,944],{"class":371,"line":932},43,[369,934,566],{"class":495},[369,936,499],{"class":379},[369,938,390],{"class":383},[369,940,480],{"class":379},[369,942,943],{"class":383},"TOP_CENTER",[369,945,526],{"class":379},[369,947,949],{"class":371,"line":948},44,[369,950,583],{"class":379},[369,952,954,957],{"class":371,"line":953},45,[369,955,956],{"class":383},"  ]",[369,958,526],{"class":379},[369,960,962,965,968],{"class":371,"line":961},46,[369,963,964],{"class":379},"}",[369,966,967],{"class":383},")",[369,969,409],{"class":379},[310,971,973],{"icon":972,"to":207},"i-lucide-settings-2",[287,974,975,976,979],{},"See the ",[977,978,206],"strong",{}," example for a complete onboarding flow with multiple steps.",[278,981,96],{"id":982},"features",[984,985,986,995,1003,1011,1018,1025,1035,1041],"field-group",{},[987,988,992],"field",{"name":989,"type":990,"id":991},"Guided tours","multi-step, lifecycle hooks","feature-tours",[287,993,994],{},"Define an ordered list of steps with per-step target elements, tooltips, images, and async preparation hooks.",[987,996,1000],{"name":997,"type":998,"id":999},"Spotlight overlay","configurable cutout","feature-overlay",[287,1001,1002],{},"Full-screen backdrop with a cutout around the target element. Configurable padding, border radius, and animation.",[987,1004,1008],{"name":1005,"type":1006,"id":1007},"Tooltips","auto-placement, arrow, image","feature-tooltips",[287,1009,1010],{},"Positioned tooltips with title, description, image, and arrow. Auto-flips to stay in viewport.",[987,1012,1015],{"name":1013,"type":1014},"Navigation","buttons + keyboard + swipe",[287,1016,1017],{},"Built-in prev/next/finish/skip buttons, keyboard navigation with ArrowRight, ArrowLeft, and Escape, and touch swipe gestures on the tooltip.",[987,1019,1022],{"name":1020,"type":1021},"Skip feature","localStorage",[287,1023,1024],{},"\"Don't show again\" checkbox with persistent storage — the onboarding won't replay for returning users.",[987,1026,1028],{"name":113,"type":1027},"single element spotlight",[287,1029,1030,1031,1034],{},"Spotlight a single element without a full tour using the ",[294,1032,1033],{},"highlight()"," shortcut.",[987,1036,1038],{"name":105,"type":1037},"breakpoint overrides",[287,1039,1040],{},"Apply different component configs at different viewport widths via matchMedia breakpoints.",[987,1042,1045],{"name":1043,"type":1044},"Runtime updates","mergeConfig / setConfig",[287,1046,1047],{},"Patch or replace the entire config without unmounting.",[278,1049,835],{"id":1050},"bundle-size",[287,1052,1053,1054,1057],{},"The production bundle weighs ",[977,1055,1056],{},"~42 KB gzipped"," (JS + CSS combined). Zero runtime dependencies — nothing is loaded beyond the assets you provide.",[283,1059,1061],{"id":1060},"bundle-callout",[310,1062,1064],{"icon":1063,"to":258},"i-lucide-arrow-right",[287,1065,1066,1067,1069],{},"Full breakdown by format in the ",[977,1068,257],{}," reference.",[1071,1072,1073],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":365,"searchDepth":372,"depth":412,"links":1075},[1076,1077,1078,1079],{"id":280,"depth":412,"text":281},{"id":324,"depth":412,"text":325},{"id":982,"depth":412,"text":96},{"id":1050,"depth":412,"text":835},"Embeddable onboarding widget for any website. Framework-agnostic, SSR-safe.","md",null,{},{"title":11,"description":1080},"LXHXdWu13cvihZVi5OnFGlIpVihDJ5N6A5raFiJxPGs",[1082,1087],{"title":15,"path":16,"stem":17,"description":1088,"children":-1},"Install @retoo/borda via npm, pnpm, yarn, or connect via CDN.",1784550670486]