Open Roles Board Section React component
A careers board: search, department chips with live counts, remote, hybrid and on-site toggles, roles grouped by department in expandable rows with summary, highlights, pay and an apply link, New badges for fresh roles, and a get-notified form.
About the Open Roles Board Section component
Open Roles Board Section is the list of jobs on a careers page. People can search, pick a department and choose remote, hybrid or on-site; the counts on the department chips update with the other filters, so nobody clicks into an empty team.
Roles are grouped by department. Each row opens in place to show a short summary, highlight chips, the contract type, the pay range and an apply link, and roles posted in the last week carry a New badge. When nothing fits, a small form lets people get an email when a matching role opens.
When to use it
Use it on a careers page, an about page or a company site's jobs section.
Feed it from your applicant tracking system's API and link each role to its full posting.
Installation
Add the Open Roles Board Section component to your project with the shadcn CLI. It lands in components/open-roles-board.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/open-roles-boardOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<OpenRolesBoard /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| eyebrow | string | "Careers" |
| title | string | "Open roles" |
| description | string | "We hire slowly and on purpose. Every role lists its pay range, and everyone who applies … |
| roles | OpenRole[] | DEFAULT_ROLES |
| today Today as YYYY-MM-DD, used for the New badge. Defaults to the newest posted date. | string | — |
| onNotify "Get notified" form under the list. Return a promise; a rejection shows an error. Pass null to hide it. | (email: string, departments: string[]) => void | Promise<void> | null | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- eyebrowstringDefault: "Careers"
- titlestringDefault: "Open roles"
- descriptionstringDefault: "We hire slowly and on purpose. Every role lists its pay range, and everyone who applies …
- rolesOpenRole[]Default: DEFAULT_ROLES
- today
Today as YYYY-MM-DD, used for the New badge. Defaults to the newest posted date.
string - onNotify
"Get notified" form under the list. Return a promise; a rejection shows an error. Pass null to hide it.
(email: string, departments: string[]) => void | Promise<void> | null - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Open Roles Board Section FAQ
- Where do the departments come from?
- From the department of each role, in the order they first appear, after All. Each chip shows how many roles match the current search and work-mode filters.
- When is a role marked New?
- When its posted date is within seven days of today. Pass today as YYYY-MM-DD, or it defaults to the newest posted date in your list so the demo stays stable.
- Can I show pay ranges?
- Yes, set salary to any text, for example "€82k–€118k" or "$95k base + commission". It is shown in the expanded row.
- How does the notify form work?
- onNotify(email, departments) is called with the email and the selected department (or an empty list for all). Return a promise; a rejection shows an error. Pass onNotify={null} to hide the form.
- Is it accessible?
- Search has a label, filters use aria-pressed, each role is a button in a heading with aria-expanded controlling a labelled region, the match count is announced and the apply link names the role.
