Two careers pages: a filterable open-roles board with department and location chips and expandable role details, and a culture page with principles, benefits and an interactive hiring-process stepper.
Roles board
roles-board.tsxOpen roles grouped by team, narrowed by search, department and location chips with live counts; each row springs open into responsibilities, requirements, salary and Apply.
| Prop | Type | Default | Description |
|---|---|---|---|
company | string | "Driftwood" | Company name in the header. |
heading | string | — | Page heading. |
description | string | — | Paragraph under the heading. |
roles | Role[] | — | Roles with id, title, department, location, type, salary, summary, responsibilities and requirements. |
onApply | (role: Role) => void | — | Called when Apply is pressed in an open row. |
className | string | — | Classes for the outer section. |
Culture
culture.tsxA rotating “we hire people who…” headline, numbered working principles, a benefits grid, a keyboard-driven hiring-process stepper and quotes from the team.
| Prop | Type | Default | Description |
|---|---|---|---|
company | string | "Quillwork" | Company name in the eyebrow. |
traits | string[] | — | Phrases rotated after “We hire people who”. |
intro | string | — | Paragraph under the headline. |
principles | { title: string; body: string }[] | — | Numbered principles. |
benefits | { icon: LucideIcon; title: string; body: string }[] | — | Benefit tiles. |
steps | { title: string; duration: string; with: string; body: string }[] | — | Hiring process steps. |
voices | { quote: string; name: string; role: string }[] | — | Team quotes. |
rolesHref | string | "/careers#roles" | Target of the roles buttons. |
openRoles | number | 7 | Count shown on the hero button. |
className | string | — | Classes for the outer section. |
Install the whole set
Installs every careers variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Also installs: Text Animation
Accessibility
- Filter chips are toggle buttons with aria-pressed; the result count is announced politely.
- Role rows are disclosure buttons with aria-expanded and aria-controls pointing at a labelled region.
- The hiring stepper is a tablist with roving focus (arrow keys, Home, End) and a labelled tab panel.