shadcn.io is not affiliated with official shadcn/ui
Job Listings Carousel Block for React
Twenty open roles three to a page with a pay range and a bookmark on each, a sliding window of five dots for the long track, and a side list of saved roles with Remove and an empty state.
Installation
Overview
Show a long list of openings without a page that scrolls forever, with this job listings carousel for React with Base UI. Vacancia, a hiring board, has twenty open roles on a ruled track, three to a page from the large breakpoint, two from small, and one with the next peeking on a phone. Each cell has the title, two tag Badges for the team and whether it is remote or on site, the place, the pay range for a year and a bookmark Toggle that saves the role. With seven pages (twenty on a phone) the foot shows only five dots at a time, a window that slides with the page: the current dot is wide and an outer dot is small when more pages lie beyond it, and each dot is a named 24 px button ("Page 4 of 7"). A side cell at the end lists the saved roles with a Remove on each, an Empty state when none are saved and a held height with its own scroll, and stacks under the track on a phone. It's built from Carousel, Toggle, Badge, Button, Empty and Guides, with CSS transitions only. The company, roles and pay are made up for the example.
FAQ
How do I list my own roles?
Edit ROLES. Each has an id, a title, a team, a place, a remote flag and a pay range in whole dollars a year (low and high). The count, the pages and the dots all derive from the list's length, and the range is written by one small helper. Replace the Place and Pay lines with whatever your board shows; keep each cell the same height by keeping the same lines in every role.
How do the five dots work for a long track?
windowOf(page, pages) returns at most five page numbers around the current one, clamped at the ends. The current dot is wide, an outer dot with more pages beyond it is small, and each is a button named "Page N of M" that goes straight to that page. The window slides as the page changes, so seven pages and twenty pages use the same row.
How does saving work?
The bookmark is a toggle button named "Save" with the role's title, pressed when saved. A saved role is added to the side list and to the count in the foot's live status ("Roles 1–3 of 20 · Saved 2"). Remove takes it out of the list, the bookmark in the track unpresses with it, and focus returns to the list. Nothing is stored: saved roles last as long as the page does. To keep them, write the ids to your own account in save and remove.
How does it work with a keyboard?
Tab reaches the bookmarks of the roles in view, Previous, Next, the dots and then the saved list. With focus on the buttons or dots the arrow keys move the track (mirrored in a right-to-left layout), and Home and End jump to the first and last page. Roles that are out of view are hidden from the tab order and from screen readers, and Previous and Next stay in the tab order at the ends.