shadcn.io is not affiliated with official shadcn/ui
Job Board Chat Block for React
A recruiter's thread with job cards that draw each salary range against the market median, Save and Apply with a counted cover note, a three-step application line that advances, and an Applications pane at the end.
Installation
Overview
Show a job search as a conversation, with this job board chat for React with Base UI. A hairline frame holds a window of fixed height for Hireleigh, a job board: the recruiter, Daveth Corrigan, posts job cards with a title, the employer, a salary range drawn as a bar on a shared scale with the market median as a tick, a Toggle to save and an Apply button. Apply opens a cover note of up to 150 characters with a counter and an attached resume; sending marks the card Applied with a three-step line, and after a short wait the recruiter posts Moved to screening and the step advances. The Applications pane at the end counts what you saved and applied for. The composer's Shine Button is the only colored control.
FAQ
What stays in the page, and how do I make it real?
Everything. The 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. Saves, applications and the stage change live in state, and the move to screening is a single timer. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the note from fileNote to your applications service and update apps when the employer's stage changes.
How is the salary bar drawn?
On one shared scale from $20,000 to $100,000, so bars compare across cards. The range is a filled segment and the median a tick, both positioned with CSS variables from a helper. The numbers are in text too, so the bar adds nothing a screen reader misses.
What moves the application along?
One timer of three seconds, started when you send the note, clears on unmount, and posts the recruiter's message and advances the card and the pane together. It runs once.
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. The cover note field is labelled with a live character count, the steps are an ordered list that names the current one, and the Applications pane lists saved and applied jobs. The avatars are hidden from assistive technology because the name is always in text.