Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Open Roles Footer Block for Radix UI

A footer for a hiring studio: the wordmark and two link groups, then a band of three open-role rows, each one link with the role, team, place and a type badge, under a count and a Shine Button to all the roles.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A hiring footer for React with Radix UI, for a studio that wants every page to end on its open roles. A first band holds the wordmark with one sentence at the start and two link groups (Studio and Careers) in a nav labelled Footer at the end. Under it, a band headed "We’re hiring" shows the open-role count, a Shine Button that goes to all the roles and three roles ruled apart from rail to rail. Each row names the role, its team, where it sits and a type badge (Full-time, Contract), with an arrow at the end, and the whole row is one link, tinted on hover. A legal band closes the page. On a phone each row becomes the role over a line of team, place and badge. The roles are made up and the block has no JavaScript of its own.

FAQ

How do I change the roles?

Edit the ROLES array at the top of the file: each role has an id, a title, a team, a place and a type. The number in the heading and on the button is OPEN, a separate constant, because the footer shows the newest few of a longer list. Point each row's link at the role's page, and the button at your careers page.

Can the rows come from an applicant tracking system?

Yes. The rows read a plain array, so you can fill it from your system on the server and pass it in. Keep the footer to the newest three or four roles and let the button carry the rest.

How does it fit on a phone?

The wordmark comes first, then the two groups side by side, then the roles. Each row stacks the title, team, place and badge on their own lines with the arrow at the end of the title, and nothing scrolls sideways at 320 pixels.

Are the roles and the studio real?

No. Soffit and its roles are made up for the example. Replace the copy, and keep the roles you list in step with your real openings so the count stays true.

Where does the copyright year come from?

It is the current year, read when the footer renders, so it never goes stale.