# Relay Carousel: Careers

> A hiring page's team voices on a dark section. Once a quote is in, the lead card offers a link to that team's open roles through `children`. The controls take the section's white text, with no extra setup.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/relay-carousel-careers-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/relay-carousel-careers-demo
- Screenshot: https://shadcn.exchange/shot/keyframeui/relay-carousel-careers-demo/light.png
- Registry item: https://keyframeui.com/r/relay-carousel-careers-demo.json
- Categories: carousel, testimonials, motion
- Listed: 2026-10-27, source last changed 2026-10-27

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/relay-carousel-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/relay-carousel.json`

## Notes from the registry

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

## Files

### `registry/demos/relay-carousel-careers-demo.tsx`

```tsx
import { RelayCarousel, RelayCarouselItem } from "@/components/ui/relay-carousel";

const team = [
  {
    name: "Sofía Herrera",
    role: "Product Designer, 3 years",
    team: "Design",
    city: "Lisbon",
    quote:
      "I joined for the craft and stayed for the critiques. Nobody here is precious about their pixels, and the work is better for it.",
    photo: "1521999693742-4717d76f97cc",
    alt: "A designer sketching at her desk under a lamp late at night",
  },
  {
    name: "Daniel Mensah",
    role: "Staff Engineer, 5 years",
    team: "Platform",
    city: "Accra",
    quote:
      "We ship small and often, and on-call is a rota, not a hero story. A Friday deploy here is just another deploy.",
    photo: "1719400471588-575b23e27bd7",
    alt: "An engineer working late in a dark room lit by screens of code",
  },
  {
    name: "Hana Kobayashi",
    role: "Support Lead, 2 years",
    team: "Support",
    city: "Remote",
    quote:
      "Support isn't a queue to clear. When three customers trip on the same thing, I open the issue and watch it get fixed that week.",
    photo: "1588873281272-14886ba1f737",
    alt: "A support lead gesturing to a customer on a laptop video call",
  },
  {
    name: "Marcus Feld",
    role: "Data Scientist, 4 years",
    team: "Data",
    city: "Berlin",
    quote:
      "Questions arrive with context and the time to answer them properly. I spend my weeks on analysis, not on dashboards nobody opens.",
    photo: "1758876022473-d3d8513f15d3",
    alt: "Two colleagues talking in front of a wall of sticky notes",
  },
  {
    name: "Aisha Rahman",
    role: "Engineering Manager, 6 years",
    team: "Mobile",
    city: "London",
    quote:
      "Focus weeks sounded like a perk when I joined. They turned out to be how we plan, and my team has never shipped calmer.",
    photo: "1768471125958-78556538fadc",
    alt: "An engineering manager working quietly in a studio full of plants",
  },
  {
    name: "Tomás Ibarra",
    role: "Brand Designer, 1 year",
    team: "Brand",
    city: "Mexico City",
    quote:
      "In my first month I redrew the icon set and nobody asked me to wait my turn. The bar is high, and so is the trust.",
    photo: "1761122827167-159d1d272313",
    alt: "A designer in a cap sketching icons on a tablet at his desk",
  },
];

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

export function RelayCarouselCareersDemo() {
  return (
    <div className="flex min-h-[var(--demo-height,auto)] w-full flex-col justify-center overflow-hidden rounded-2xl bg-zinc-950 py-14 text-white sm:py-20">
      <RelayCarousel
        aria-labelledby="relay-careers-heading"
        heading={
          <h2
            id="relay-careers-heading"
            className="text-[2rem] leading-[1.02] font-semibold tracking-[-0.035em] text-balance @2xl:text-5xl"
          >
            Ask the people
            <br />
            <span className="text-zinc-500">who build Okto.</span>
          </h2>
        }
      >
        {team.map((person) => (
          <RelayCarouselItem
            key={person.name}
            name={person.name}
            role={person.role}
            label={`${person.team} · ${person.city}`}
            quote={person.quote}
            image={photo(person.photo)}
            alt={person.alt}
          >
            <a
              href="#open-roles"
              aria-label={`Open roles in ${person.team}`}
              className="group/link grid size-9 place-items-center rounded-full bg-white text-zinc-950 transition-transform duration-200 ease-out outline-white hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 active:scale-95"
            >
              <svg
                aria-hidden
                viewBox="0 0 16 16"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.6"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="size-4 transition-transform duration-200 ease-out group-hover/link:translate-x-px group-hover/link:-translate-y-px"
              >
                <path d="M5 11 11 5M6 5h5v5" />
              </svg>
            </a>
          </RelayCarouselItem>
        ))}
      </RelayCarousel>
    </div>
  );
}
```