# Company Benefits

> A company benefits section with icons and short blurbs for perks like health, time off, and remote work. Reassures candidates as they read open roles.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/marketing-careers-company-benefits).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/marketing-careers-company-benefits
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/marketing-careers-company-benefits-light-0b33321c36a2e997.png
- Registry item: https://www.shadcn-ui-blocks.com/r/marketing-careers-company-benefits.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/marketing-careers-company-benefits.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: `class-variance-authority`, `lucide-react`, `radix-ui`

## Files

### `components/blocks/marketing/careers/company-benefits.tsx`

```tsx
import * as React from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Coffee,
  GraduationCap,
  HeartPulse,
  Home,
  Laptop,
  MapPin,
  PartyPopper,
  Plane,
  Users,
  Wallet,
} from "lucide-react";

interface Benefit {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  category: "health" | "work" | "growth" | "lifestyle";
}

export default function CompanyBenefits() {
  const benefits: Benefit[] = [
    {
      id: "1",
      title: "Comprehensive Health Insurance",
      description:
        "Full medical, dental, and vision coverage with premium plans for you and your family.",
      icon: <HeartPulse className="h-10 w-10 text-pink-500" />,
      category: "health",
    },
    {
      id: "2",
      title: "Mental Health Support",
      description:
        "Free access to therapy and counseling services through our wellness platform.",
      icon: <HeartPulse className="h-10 w-10 text-pink-500" />,
      category: "health",
    },
    {
      id: "3",
      title: "Remote-First Culture",
      description:
        "Work from anywhere in the world with our distributed team approach.",
      icon: <Home className="h-10 w-10 text-indigo-500" />,
      category: "work",
    },
    {
      id: "4",
      title: "Flexible Working Hours",
      description:
        "Choose hours that work for you with our core collaboration windows.",
      icon: <Laptop className="h-10 w-10 text-indigo-500" />,
      category: "work",
    },
    {
      id: "5",
      title: "Learning & Development Budget",
      description:
        "$2,500 annual budget for courses, books, and conferences to advance your skills.",
      icon: <GraduationCap className="h-10 w-10 text-amber-500" />,
      category: "growth",
    },
    {
      id: "6",
      title: "Career Advancement",
      description:
        "Clear growth paths and regular promotion cycles to advance your career.",
      icon: <GraduationCap className="h-10 w-10 text-amber-500" />,
      category: "growth",
    },
    {
      id: "7",
      title: "Generous PTO",
      description:
        "Unlimited paid time off with a minimum of 20 days encouraged annually.",
      icon: <Plane className="h-10 w-10 text-sky-500" />,
      category: "lifestyle",
    },
    {
      id: "8",
      title: "Paid Parental Leave",
      description:
        "16 weeks of fully paid leave for all new parents, including adoption.",
      icon: <Users className="h-10 w-10 text-sky-500" />,
      category: "lifestyle",
    },
    {
      id: "9",
      title: "Company Retreats",
      description:
        "Annual all-company gatherings in exciting locations worldwide.",
      icon: <MapPin className="h-10 w-10 text-sky-500" />,
      category: "lifestyle",
    },
    {
      id: "10",
      title: "Wellness Stipend",
      description:
        "$100 monthly wellness stipend for gym, meditation apps, or other wellness activities.",
      icon: <HeartPulse className="h-10 w-10 text-pink-500" />,
      category: "health",
    },
    {
      id: "11",
      title: "Home Office Budget",
      description:
        "$1,500 to set up your ideal home workspace with the equipment you need.",
      icon: <Home className="h-10 w-10 text-indigo-500" />,
      category: "work",
    },
    {
      id: "12",
      title: "Competitive Salary",
      description:
        "Above-market compensation with regular reviews and adjustments.",
      icon: <Wallet className="h-10 w-10 text-green-500" />,
      category: "work",
    },
    {
      id: "13",
      title: "Equity Package",
      description:
        "Generous equity grants so you can share in the company's success.",
      icon: <Wallet className="h-10 w-10 text-green-500" />,
      category: "work",
    },
    {
      id: "14",
      title: "Professional Development",
      description:
        "Mentorship programs and internal workshops led by industry experts.",
      icon: <GraduationCap className="h-10 w-10 text-amber-500" />,
      category: "growth",
    },
    {
      id: "15",
      title: "Sabbatical Program",
      description: "4-week paid sabbatical for every 3 years with the company.",
      icon: <Plane className="h-10 w-10 text-sky-500" />,
      category: "lifestyle",
    },
    {
      id: "16",
      title: "Coffee Allowance",
      description: "$50 monthly coffee allowance for your caffeine needs.",
      icon: <Coffee className="h-10 w-10 text-sky-500" />,
      category: "lifestyle",
    },
    {
      id: "17",
      title: "Company Events",
      description:
        "Regular social events, team celebrations, and holiday parties.",
      icon: <PartyPopper className="h-10 w-10 text-sky-500" />,
      category: "lifestyle",
    },
  ];

  return (
    <div className="container mx-auto px-4 py-12">
      <div className="mb-10 text-center">
        <h2 className="mb-2 text-3xl font-bold tracking-tight">
          Why Work With Us
        </h2>
        <p className="text-muted-foreground mx-auto max-w-2xl">
          We offer competitive benefits and a supportive culture to help you
          thrive both professionally and personally.
        </p>
      </div>

      <Tabs defaultValue="all" className="w-full">
        <div className="mb-8 flex justify-center">
          <TabsList className="flex h-fit flex-wrap">
            <TabsTrigger value="all">All Benefits</TabsTrigger>
            <TabsTrigger value="health">Health & Wellness</TabsTrigger>
            <TabsTrigger value="work">Work & Compensation</TabsTrigger>
            <TabsTrigger value="growth">Growth & Development</TabsTrigger>
            <TabsTrigger value="lifestyle">Lifestyle & Perks</TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="all" className="space-y-8">
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {benefits.map((benefit) => (
              <BenefitCard key={benefit.id} benefit={benefit} />
            ))}
          </div>
        </TabsContent>

        <TabsContent value="health" className="space-y-8">
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {benefits
              .filter((benefit) => benefit.category === "health")
              .map((benefit) => (
                <BenefitCard key={benefit.id} benefit={benefit} />
              ))}
          </div>
        </TabsContent>

        <TabsContent value="work" className="space-y-8">
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {benefits
              .filter((benefit) => benefit.category === "work")
              .map((benefit) => (
                <BenefitCard key={benefit.id} benefit={benefit} />
              ))}
          </div>
        </TabsContent>

        <TabsContent value="growth" className="space-y-8">
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {benefits
              .filter((benefit) => benefit.category === "growth")
              .map((benefit) => (
                <BenefitCard key={benefit.id} benefit={benefit} />
              ))}
          </div>
        </TabsContent>

        <TabsContent value="lifestyle" className="space-y-8">
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {benefits
              .filter((benefit) => benefit.category === "lifestyle")
              .map((benefit) => (
                <BenefitCard key={benefit.id} benefit={benefit} />
              ))}
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}

function BenefitCard({ benefit }: { benefit: Benefit }) {
  return (
    <Card className="gap-3 overflow-hidden transition-all hover:shadow-md">
      <CardHeader className="">
        <div className="mb-2">{benefit.icon}</div>
        <CardTitle className="text-xl">{benefit.title}</CardTitle>
      </CardHeader>
      <CardContent>
        <CardDescription className="text-sm">
          {benefit.description}
        </CardDescription>
      </CardContent>
    </Card>
  );
}
```

### `components/ui/card.tsx`

```tsx
import * as React from "react"

import { cn } from "@/lib/utils"

function Card({
  className,
  size = "default",
  ...props
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
  return (
    <div
      data-slot="card"
      data-size={size}
      className={cn(
        "group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
        className
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4",
        className
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-title"
      className={cn(
        "font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm",
        className
      )}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn("px-6 group-data-[size=sm]/card:px-4", className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn(
        "flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4",
        className
      )}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
```

### `components/ui/tabs.tsx`

```tsx
"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Tabs as TabsPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Tabs({
  className,
  orientation = "horizontal",
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      data-orientation={orientation}
      className={cn(
        "group/tabs flex gap-2 data-horizontal:flex-col",
        className
      )}
      {...props}
    />
  )
}

const tabsListVariants = cva(
  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
  {
    variants: {
      variant: {
        default: "bg-muted",
        line: "gap-1 bg-transparent",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function TabsList({
  className,
  variant = "default",
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List> &
  VariantProps<typeof tabsListVariants>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      data-variant={variant}
      className={cn(tabsListVariants({ variant }), className)}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
        className
      )}
      {...props}
    />
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn("flex-1 text-sm outline-none", className)}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
```