shadcn.io is not affiliated with official shadcn/ui
Hiring Split Team Block for Vue
A hiring split for a charity CRM: the pitch, the headcount and the open-role count with the one Shine Button at the start, and five open roles as a ruled list of links behind a split divider at the end.
Installation
Overview
A hiring section for Vue with Ark UI, for Lanthorne, a CRM for small charities. At the start sit the title, one sentence and, in a band between two hairlines, two figures: the people and the open roles. Under them is the block's one Shine Button, "See all 12 roles". At the end, behind a split divider that runs from the page's top rule to the block's end, five of those roles are a ruled list of links: each has a title, a department chip, where it is based and an arrow that mirrors in a right-to-left layout. Each whole row is one link, lit on hover and keyboard focus. On a phone the roles sit under the pitch, rail to rail, and the block ends on the last row. It's built from Guides, Shine Button and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For careers pages, about pages and the foot of a company page. The roles are invented.
FAQ
How do I change the roles?
Edit ROLES at the top of the file: a title, a department and a location for each, with a stable id. Keep the location specific ("Leeds, hybrid"), never just "Remote". The list shows five; OPEN_ROLES is the total behind the button, and PEOPLE and COUNTRIES feed the first figure. The list is a real list named "Open roles", each title an h3 under the section's h2.
Where do the links go?
All of them are links (href="#"): point each role at its posting or your applicant tracking system, and the button at your careers page. A role's whole row is the click target: the title's link stretches over the row with an ::after layer, so the row has one name, one tab stop and a focus ring around the whole row.
The Shine Button takes asChild with the link inside, so it can be your router's link.
Why is there only one button?
The block has one main action, seeing every role, so it is the one filled control and gets the Shine Button: a band of light sweeps across it once on hover and keyboard focus (with reduced motion it fades in instead). The roles are links, not buttons, so they never compete with it.
Does it work in a right-to-left language?
Yes. The split, the list and the dividers follow the reading direction, and the arrow at the end of each row mirrors, so it points the way the row leads. The figures are wrapped so a number stays whole.
How does it fit on a phone?
Below the lg breakpoint the pitch comes first, with the figures in two cells under the title and the button under them, then the roles, rail to rail under a rule with + marks. A title that doesn't fit wraps, and its chip and location wrap with it; nothing scrolls sideways at 320 pixels. The block ends on the last row, with no closing rule.