Organiza tus ideas
Crea tableros y arrastra tarjetas entre columnas.
Step-by-step onboarding modal
A welcome modal with three steps, an illustration that changes color and shape, dots and next buttons.
Settings
Code
<div class="uv-oob"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire">Show welcome</button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-label="Welcome"><div class="il" aria-hidden="true"><i class="a"></i><i class="b"></i><i class="c"></i></div><div class="sl"><div class="st on" aria-hidden="false"><p class="ti">Organize your ideas</p><p class="ds">Create boards and drag cards between columns.</p></div><div class="st" aria-hidden="true"><p class="ti">Work as a team</p><p class="ds">Invite your people and comment in real time.</p></div><div class="st" aria-hidden="true"><p class="ti">Stay on time</p><p class="ds">Due dates, reminders and alerts on your phone.</p></div></div><div class="ft"><span class="dt"><i class="on"></i><i></i><i></i></span><button type="button" class="bk">Back</button><button type="button" class="nx"><span class="n">Next</span><span class="e">Get started</span></button></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
First runs set the tone of a product, and a short guided tour beats a wall of text. This modal walks through three steps; with each one the illustration shifts its shapes and gradient, the title and description slide in from the side, the progress dots stretch and the main button changes from Next to the final call to action.
Arrow keys move between steps, a Back button appears after the first one, and Escape closes the tour. Edit the steps in the data at the top of the code, and keep each description to a single sentence.