# Stretch Index: Open Roles

> A careers page with `openOn="click"` and `numbered={false}`: rows open like an accordion, a second click closes them, and the Apply link inside stays clickable. In a narrow frame the team and place move under the title.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/stretch-index-careers-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/stretch-index-careers-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/stretch-index-careers-demo-light-991423428deb1283.png
- Registry item: https://keyframeui.com/r/stretch-index-careers-demo.json
- Categories: list, hover, layout
- Listed: 2026-10-14, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/stretch-index-careers-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/stretch-index.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/stretch-index#stretch-index-careers-demo

## Files

### `registry/demos/stretch-index-careers-demo.tsx`

```tsx
import { StretchIndex, StretchIndexItem } from "@/components/ui/stretch-index";

const roles = [
  {
    title: "Senior Product Designer",
    team: "Design",
    place: "Remote, Europe",
    text: "Own the editor from the first sketch to the release notes. You'll pair with two engineers and talk to customers every week.",
    pay: "€85–105k",
    photo: "1572044162444-ad60f128bdea",
    accent: "#ec6fa8",
  },
  {
    title: "Design Engineer",
    team: "Design",
    place: "Lisbon or remote",
    text: "Build the components our designers draw, and the motion that makes them feel right. React, TypeScript and a good eye.",
    pay: "€80–100k",
    photo: "1586717791821-3f44a563fa4c",
    accent: "#9b87f5",
  },
  {
    title: "Staff Backend Engineer",
    team: "Engineering",
    place: "Lisbon",
    text: "Scale the sync engine that keeps 40,000 teams' documents in step. Go, Postgres, and careful thinking about conflicts.",
    pay: "€110–135k",
    photo: "1499750310107-5fef28a66643",
    accent: "#3ba7e0",
  },
  {
    title: "Product Manager, Billing",
    team: "Product",
    place: "Remote, Europe",
    text: "Make paying us the easiest part of using us: plans, invoices, taxes in 30 countries, and the emails nobody wants to get.",
    pay: "€90–110k",
    photo: "1497032628192-86f99bcd76bc",
    accent: "#2fb383",
  },
  {
    title: "Support Lead",
    team: "Operations",
    place: "Lisbon",
    text: "Lead the six people who answer every ticket within four hours, and turn what you hear into fixes on the roadmap.",
    pay: "€60–72k",
    photo: "1585208798174-6cedd86e019a",
    accent: "#e5a72e",
  },
];

const photo = (id: string) =>
  `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=480&h=360&q=80`;

const slug = (title: string) => title.toLowerCase().replace(/[^a-z0-9]+/g, "-");

export function StretchIndexCareersDemo() {
  return (
    <section className="w-full max-w-3xl text-zinc-900 dark:text-zinc-50">
      <div className="mb-6 flex items-end justify-between gap-4">
        <h3 className="text-2xl font-semibold tracking-tight">Open roles</h3>
        <p className="font-mono text-xs text-zinc-500 tabular-nums">{roles.length} positions</p>
      </div>

      <StretchIndex openOn="click" numbered={false} className="border-t border-current/10">
        {roles.map((role) => (
          <StretchIndexItem
            key={role.title}
            title={role.title}
            meta={`${role.team} · ${role.place}`}
            image={photo(role.photo)}
            accent={role.accent}
          >
            <p className="max-w-md text-pretty text-zinc-600 dark:text-zinc-400">{role.text}</p>
            <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
              <a
                href={`#apply-${slug(role.title)}`}
                className="inline-flex h-8 items-center gap-1.5 rounded-full bg-zinc-900 px-3.5 font-medium text-white outline-none hover:bg-zinc-700 focus-visible:ring-2 focus-visible:ring-zinc-900 focus-visible:ring-offset-2 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-300 dark:focus-visible:ring-zinc-50 dark:focus-visible:ring-offset-zinc-950"
              >
                Apply <span aria-hidden>→</span>
              </a>
              <span className="text-zinc-500 tabular-nums">{role.pay}</span>
            </div>
          </StretchIndexItem>
        ))}
      </StretchIndex>
    </section>
  );
}
```