# Cicerone A first-run tour that dims the screen, highlights one element at a time and explains what it does. > Cicerone is an exclusive THM Componentes component for introducing an app on first use. It dims the interface, cuts out the element of each step with rounded corners and shows a popover with an arrow and progress next to it. It scrolls to the target, supports the keyboard, can be skipped and resumed, and has conditional and click-to-advance steps. - Category: Cards and surfaces - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/cicerone/ ## What it looks like The interface dims under a navy veil, and only a rounded cutout stays lit around the element being explained, outlined in white. Next to it appears a white popover with an arrow, the step count, a title, short text, a segmented progress bar and buttons to go back and forward. With each step, the cutout glides with a spring motion to the next target, and the area scrolls by itself, inside the component, when the target is out of view. The highlighted element stays clickable; clicking outside it makes the popover shake gently. ## You may be looking for this if you asked for something like - “show new users where everything is in my app” - “that step-by-step thing that dims the screen and highlights one button at a time” - “a first-run tutorial for my SaaS dashboard” - “a tooltip pointing at a new feature with an arrow” - “guide customers until they click to create their first project” - “a tour people can skip and pick up later where they left off” - “walk my team through the internal system without a video” ## Also known as onboarding tour, product tour, guided tour, walkthrough, coach marks, spotlight tour, feature tour ## When to use - First use of a SaaS product or admin dashboard - Launching a new feature that people need to discover - Team training on an internal system - Flows where people must click something to continue, like creating a first project ## When to avoid - Landing pages and content sites, where a tour interrupts reading - Simple interfaces, where clear labels make a step-by-step tour unnecessary ## How to ask your AI ```text Create a first-run guided tour for my dashboard: it dims the screen and cuts out the element of each step with rounded corners, a popover with an arrow and progress bar, scrolling to the target, arrow keys, Enter and Esc, skip and resume, and no animation for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Cicerone ### Does Cicerone remember where people stopped? Yes, if you want it to. With the storageKey prop, Cicerone saves in localStorage whether the tour was skipped or finished and which step it was on, so people who skipped can resume from there. Without storageKey nothing is saved, and if the browser blocks storage the tour keeps working without saving progress. ### How do I point Cicerone at elements on my screen? Each Cicerone step takes a selector in target, looked up inside the component, plus a title and text. Mark your elements with attributes such as data-tour and turn off the demo. Steps without a target are centered, steps with when only show when the condition holds, and advanceOn set to click moves on when the target is clicked. ### Does Cicerone work with a keyboard and reduced motion? Yes. With focus on Cicerone, the right arrow or Enter moves forward, the left arrow goes back and Esc pauses the tour. Each step change is announced to screen readers. With reduced motion on, the cutout jumps straight to the target without the spring, and the popover does not shake. ## Related components - [Baliza](https://vibecode.thmtecnologia.com/en/components/baliza/): Tooltips and menus pinned to the button that opens them, switching sides on their own when they hit an edge. - [Postal](https://vibecode.thmtecnologia.com/en/components/postal/): A window that tilts up from the page in 3D with a slight bounce, over a dimmed and blurred backdrop. - [Baralho](https://vibecode.thmtecnologia.com/en/components/baralho/): Notifications that pop up in a corner, stacked like cards, and go away on their own or with a sideways swipe. - [Trevo](https://vibecode.thmtecnologia.com/en/components/trevo/): A search box that opens with Ctrl K or ⌘K to find pages and run actions without leaving the keyboard. - [Crachá](https://vibecode.thmtecnologia.com/en/components/cracha/): A row of overlapping round photos; on hover, a tag with name and role pops up and tilts with the cursor. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).