# Careers 1 - Careers list grouped by department

> A careers section with a page heading, supporting copy, and repeating department blocks where each role is a row with title, location, and arrow link animation.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/careers1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/careers1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/careers1-light-c817c257c9239f80.png
- Registry item: https://shadcnblocks.com/r/careers1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/careers1.json
```

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

## Dependencies

- npm packages: `cn`, `lucide-react`

## Files

### `block/careers1/careers1.tsx`

```tsx
import { ArrowRight } from "lucide-react";
import { cn } from "cn";

interface Role {
  title: string;
  location: string;
  href: string;
}

interface Department {
  title: string;
  roles: Role[];
  className?: string;
}

interface Careers1Props {
  title?: string;
  description?: string;
  departments?: Department[];
  className?: string;
}

const Careers1 = ({
  title = "Careers",
  description = `We publish roles as soon as hiring managers open a requisition. Teams are grouped so candidates can scan by function without loading a separate filter.

Each row links to the full description on your ATS or careers site. Remote and office locations appear on the second line in smaller type.

If nothing matches today, we still welcome general applications through the contact form.`,
  departments = [
    {
      title: "Sales",
      roles: [
        {
          title: "Sales Manager",
          location: "London",
          href: "#",
        },
        {
          title: "Sales Development Representative",
          location: "London",
          href: "#",
        },
        {
          title: "Sales Manager",
          location: "London",
          href: "#",
        },
      ],
    },
    {
      title: "Customer Success",
      roles: [
        {
          title: "Customer Success Associate",
          location: "London",
          href: "#",
        },
      ],
    },
  ],
  className,
}: Careers1Props) => {
  return (
    <section className={cn("bg-background py-32", className)}>
      <div className="container">
        <h2 className="text-4xl font-medium md:text-6xl">{title}</h2>
        <p className="mt-6 whitespace-pre-wrap text-muted-foreground md:mb-20 md:text-lg">
          {description}
        </p>
        {departments.map((department) => (
          <div key={department.title} className="mt-12 md:mt-20">
            <h3 className="mb-8 text-3xl font-medium md:text-4xl">
              {department.title}
            </h3>
            <ul className="divide-y divide-border border-y border-border">
              {department.roles.map((role, index) => (
                <li key={index} className="group">
                  <a href={role.href} className="flex items-center py-6">
                    <div>
                      <div className="font-medium md:text-lg">{role.title}</div>
                      <div className="text-xs text-muted-foreground md:mt-2 md:text-sm">
                        {role.location}
                      </div>
                    </div>
                    <ArrowRight className="ml-auto size-6 -translate-x-6 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" />
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
};

export { Careers1 };
```