Tour Skip
A copy-paste onboarding & coachmarks component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Onboarding & CoachmarksHTMLCSSany framework
Copy into your project
HTML
<!-- Tour Skip — subtle "skip" with arrow that nudges on hover -->
<button class="nuda-tskip" type="button">
<span>Skip tour</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12 L19 12" />
<path d="M13 6 L19 12 L13 18" />
</svg>
</button>CSS
/* Tour Skip
Quiet ghost button: arrow nudges on hover.
Customize: --tskip-accent */
.nuda-tskip {
--tskip-accent: #e4ff54;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #a1a1aa;
font: 500 0.875rem ui-sans-serif, system-ui, sans-serif;
border-radius: 7px;
cursor: pointer;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.nuda-tskip:hover {
border-color: rgba(228, 255, 84, 0.3);
color: var(--tskip-accent);
background: rgba(228, 255, 84, 0.04);
}
.nuda-tskip svg {
width: 13px;
height: 13px;
transition: transform 0.25s;
}
.nuda-tskip:hover svg { transform: translateX(2px); }How to use Tour Skip
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.