# Careers

> 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.

- Collection: Pages
- Tier: pro
- Docs: https://geturui.com/docs/careers-pages
- Install: `npx shadcn@latest add @geturui-pro/careers-pages`
- Dependencies: motion, lucide-react

## Variants

### Roles board

Open roles grouped by team, narrowed by search, department and location chips with live counts; each row springs open into responsibilities, requirements, salary and Apply.

Install: `npx shadcn@latest add @geturui-pro/careers-pages-roles-board`

```tsx
import { RolesBoard } from "@/components/pages/careers-pages/roles-board";

export default function Careers() {
  return (
    <RolesBoard
      company="Driftwood"
      onApply={(role) => window.open(`/careers/${role.id}/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

A rotating “we hire people who…” headline, numbered working principles, a benefits grid, a keyboard-driven hiring-process stepper and quotes from the team.

Install: `npx shadcn@latest add @geturui-pro/careers-pages-culture`

```tsx
import { Culture } from "@/components/pages/careers-pages/culture";

export default function Life() {
  return (
    <Culture
      company="Quillwork"
      traits={["write things down", "ship small and often"]}
      rolesHref="/careers#roles"
      openRoles={7}
    />
  );
}
```

| 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. |

## 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.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.