Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Resume Builder AI Block for Vue

A resume editor in a fixed window with a section list, labelled fields, typed suggestions to accept or dismiss, a count of applied suggestions and verb-led bullets, a drawn preview page and Download as text.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Improve a resume one line at a time, with this resume builder for Vue with Ark UI. A framed window of fixed height has a top bar for Resumewren, a resume editor, with Tabs that switch between Edit and Preview and a Download as text button. Edit has a section list at the start (Summary, Experience, Education and Skills), each showing "Done" or a count of suggestions, and the chosen section's lines in labelled Textarea fields. Some lines carry a typed suggestion, such as "Start with a verb and add a number", with Accept, which replaces the text, and Dismiss. The status line counts the suggestions applied and, from a typed list of strong verbs, how many bullets start with one. Preview draws the page from the real text with initials only. The frame is ruled by Guides.

FAQ

What stays local, and how do I wire it for real?

Everything. The resume, the suggestions and the verb list are typed at the top of the file, no model runs, and nothing is saved when you leave. To make it real, produce the suggestions from your model and load them into the same Entry shape (the line, the suggested replacement and a short reason), and save the text where Accept and the fields fire.

How is the verb count worked out?

It looks at the first word of each bullet in Experience and Education and checks it against a typed list of strong verbs. "Led the redesign" counts and "Responsible for the redesign" does not. It updates as you type or accept a suggestion. It is a simple check, not a judgement of the writing.

What does Download as text save?

A plain text file, resume.txt, with your initials, the role, each section and its lines, built from the text as it stands now, including accepted suggestions. Names and contact details are not part of the sample.

Why initials only?

The sample is a fictional person, drawn with initials so no real name or photo is implied. A real editor would add contact fields, and the same download would carry them.

Is it usable with a keyboard and a screen reader?

Every field has a visible label, the section list marks the chosen section as current, and the suggestion buttons say which field they are for. After Accept or Dismiss, focus returns to the field they belong to, and one polite status line says what happened. Edit and Preview are a named tab list.

How does it look on a phone?

Below 768 px a Sections and Editor switch shows one side at a time, choosing a section opens its editor, the preview scrolls on its own, and the window keeps its height.