Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Resume Review Chat Block for React Aria

A hiring friend's thread that goes through a resume point by point, with a Fix list pane of six checkboxes and a progress bar, a system line in the log for every tick, and a Show next button that scrolls to and focuses the next open point.

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

Work through feedback as a conversation, with this resume review chat for React with React Aria. A hairline frame holds a window of fixed height for Careersheet, a resume feedback swap: the reviewer, Wilhelmina Rask, makes numbered points in the log and the Fix list pane at the end holds the same six as Checkboxes under a Progress bar that reads 2 of 6 fixed. Ticking a point posts a system line in the log and moves the bar, and Show next open point scrolls the pane to the next one and focuses it. Replies cite points by number. The composer's Shine Button is the only colored control. On a phone a Chat and Fixes switch shows one pane at a time.

FAQ

What stays in the page, and how do I make it real?

Everything. The reviewer's replies come from a short typed script in this file, picked by words in your message, then one fallback per message and a last line that says it was the last sample reply. The ticks live in state. Nothing is sent and no model runs, and no keyword score or rewrite is offered. To wire it for real, load POINTS from your reviewer and send each tick from tick to your server.

What happens when I tick a point?

The box fills, the bar and the count under Fix list change, and a system line such as Marked Cut the objective line as fixed is added to the log so the thread keeps a record. Unticking marks it not fixed and says so the same way.

What does Show next open point do?

It finds the first point that is not fixed, scrolls the pane to it without moving the page, and moves focus to its checkbox. On a phone it also switches to the Fixes view. When all six are ticked it says so in the status line instead.

How does the composer work?

Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. The field grows with its content up to a limit. Send stays quiet while the field is empty and says so if pressed, and focus stays in the field after sending.

Is it usable with a keyboard and a screen reader?

The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden name and time. Each point is a labelled checkbox whose name includes its number and title, and a hidden Fixed or Not fixed yet follows it, so state is never only a fill. The avatars are hidden from assistive technology because the name is always in text.

How does it look on a phone?

Below the medium breakpoint the Fix list hides and a Chat and Fixes switch under the top bar shows one at a time, with the number of open points on the second. The window keeps its height and only the log and the list scroll.