shadcn.io is not affiliated with official shadcn/ui
Accordion Job Board Team Block for Ark UI
A job board for a smart-meter platform: a department select with a live count over seven open roles in an accordion; a role opens to what you'll do, three requirements, the pay range and an Apply link.
Installation
Overview
A job board for React with Ark UI, for Ullswick, a smart-meter platform. A start-aligned header sits over a filter band under a rule with + marks: a department select and a live count ("Showing 7 of 7 roles"). Under it the roles are an accordion of hairline rows that runs from rail to rail and ends the block. A closed role shows its title and three chips (department, where it is based, full-time or contract). An open one shows what you'll do, three things you'll need, the pay range, who the role reports to and an Apply link. Pick a department and the list narrows. One role is open when the page loads. It's built from Accordion, Select, Badge, Button and Guides, with CSS transitions and your theme's tokens for every colour. For careers pages with more than a handful of roles. The roles and the pay are invented example data.
FAQ
How do I change the roles?
Edit ROLES at the top of the file: each has an id, a title, a department, a location, a type, a one-sentence summary, three needs, a pay range and who the role reportsTo. The select's options and their counts are built from the departments in that list, and OPEN_ROLE names the role that's open on load. One role is open at a time. Pay is written as one dir="ltr" span so the currency and range stay in order in a right-to-left layout.
How does the department select work?
It narrows the list to one department, or back to all of them, and the count beside it updates in a polite live region, so a screen reader hears "Showing 3 of 7 roles" without losing its place. Nothing is saved or sent: it's a view of the list on the page. A role that is filtered out leaves the list. The select is built from a list collection.
How does it work with a keyboard and a screen reader?
Each role's title is a button inside its own h3 under the section's h2; Enter or Space opens and closes it, and the button says whether it's expanded. The chips are part of the button's name, so a screen reader reads the department, place and type with the title.
The Up and Down arrows also move between roles, and Home and End jump to the first and last.
Are the closed roles' details in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every role's details render from the start, hidden until it opens.
Where does Apply go?
It's a link (href="#"): point it at the role's application form or your applicant tracking system. Its accessible name includes the role ("Apply for Firmware engineer, meter radio"), so the links read apart in a list of links.
The button takes asChild with the link inside.
How does it fit on a phone?
The select goes full width and the count sits under it. A role's chips wrap under its title, and an open role stacks: the summary and requirements first, then the pay, who it reports to and Apply. Nothing scrolls sideways at 320 pixels. When a filter leaves fewer roles, the block gets shorter: the next block moves up with it.