React Careers Board

Most companies hand their careers page to an ATS iframe that ignores their design system and ranks badly. This keeps the listing on your own site: filterable by team and location, grouped by team, with the full role description and apply link one click in.

Open roles

5 open roles

Field

Operations

Silicon

Software

Installation

npx shadcn@latest add "https://kelvinui.com/registry/careers-board.json"

Props

PropTypeDescription
jobsJobOpening[]{ id, title, team, location, type, remote?, summary, responsibilities?, requirements?, applyHref?, postedLabel? }
titlestringHeading above the filters
emptyMessagestringShown when filters match nothing

Team and location filter options are derived from the data, so adding a role in a new city needs no configuration. Roles group under team headings in the list view; remote renders its own badge because "remote OK" is the single most-scanned attribute on a job listing.

Keep the detail view on-page

Selecting a role swaps the board for an inline detail rather than navigating away — the back link returns to the same filter state, which is what a candidate comparing three roles actually wants. postedLabel is a string, not a date: relative freshness ("Posted 3 days ago") computed from a timestamp would differ between a static build and the browser, and stale-by-a-day is a worse look than letting your CMS own the phrasing.

For the actual application flow, point applyHref at your ATS. This component's job is discovery and presentation; it deliberately does not collect CVs, because that is a data-protection surface you want handled by a system built for it.

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.