# Alfinete Numbered pins you drop on an image or screen to comment, reply and mark as resolved. > Alfinete is an exclusive THM Componentes component that adds Figma-style comments on top of any content: press C, click to drop a numbered pin, start a thread with replies and mark it as resolved. A side panel lists and filters everything. It suits reviewing artwork, screens and documents without leaving your product. - Category: Apps and productivity - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/alfinete/ ## What it looks like A top bar holds a button for comment mode, a shortcut hint and the count of open comments. In comment mode the cursor turns into a crosshair and every click drops a teardrop-shaped pin with the commenter's initials and a small number in the corner. Each author keeps a fixed color. Clicking a pin opens a white bubble with the thread, relative timestamps, a reply field and a resolve button; once resolved, the pin fades and leaves the artwork. On the right sits a panel with tabs for open and resolved comments and a search filter. ## You may be looking for this if you asked for something like - “let clients comment right on the artwork, like in Figma” - “click a spot on an image and leave a comment there” - “numbered dots with comments on top of a prototype screen” - “layout approval with comments I can mark as resolved” - “a document review area with a thread on each spot” - “my team should point out fixes directly on a site screenshot” - “visual feedback on a page without an external tool” ## Also known as comment overlay, comment pins, pinned comments, image annotations, visual feedback tool, design review comments, comment threads ## When to use - Approving artwork, banners and campaign pieces with clients inside your system - Reviewing screens and prototypes in agency or product portals - Comments on floor plans, contracts or documents shown as images - QA flows where the team flags visual bugs on the screen itself ## When to avoid - Comments that must follow a text passage that moves, since a pin only stores a percentage position - Very narrow phone screens, where the side panel is hidden ## How to ask your AI ```text Add a Figma-style comment layer over the artwork preview in my approval portal: numbered pins with threads, resolve and reopen, a filterable side panel, a C shortcut for comment mode, keyboard navigation and events that save everything to my API. ``` 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 Alfinete ### Where does Alfinete store comments? In your app state. Alfinete works with v-model and emits an event for every new pin, reply, resolution, reopening and move, with the position in percent. To let everyone see the same comments, wire those events to your API or a real-time database; the component does not ship its own server. ### Can I use Alfinete over any content? Yes. Alfinete takes your content through a slot, so it works over an image, a screenshot, a prototype or a document. Pins are stored as percentages of the area, so they follow it when it resizes. Without a slot, the demo shows a sample poster with four comments. ### Does Alfinete work with the keyboard? Yes. In Alfinete, the C key toggles comment mode, N and P or the arrow keys move through open pins, Enter opens a thread and Esc closes it. Creating, resolving and moving comments triggers an announcement for screen readers. ## Related components - [Comitiva](https://vibecode.thmtecnologia.com/en/components/comitiva/): Colored arrows with each teammate's name moving across the document, with their text selections and cursor messages. - [Mutirão](https://vibecode.thmtecnologia.com/en/components/mutirao/): An endless whiteboard to stick notes, draw shapes, connect arrows and sketch by hand, like a live workshop wall. - [Palimpsesto](https://vibecode.thmtecnologia.com/en/components/palimpsesto/): A timeline of a document's versions, with a slider to go back in time, side-by-side comparison and a restore button. - [Errata](https://vibecode.thmtecnologia.com/en/components/errata/): Shows what changed between two versions of code or text, in red and green, so you can accept or reject each part. - [Lauda](https://vibecode.thmtecnologia.com/en/components/lauda/): A text editor where every line is a block: type a slash to add headings, lists and to-dos, and drag to reorder. --- 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).