Touch Hitbox

Without

~36px hit area

With touch-hitbox

≥44px hit area

The dashed borders show the actual clickable/tappable area.Try tapping around the icons to feel the difference!

import { Heart } from 'lucide-react';

export default function TouchHitboxDemo() {
  return (
    <div className="flex flex-col items-center gap-8 py-8">
      <div className="flex items-start gap-12">
        {/* Without touch-hitbox */}
        <div className="flex flex-col items-center gap-3">
          <div className="relative">
            <button
              aria-label="Like"
              className="inline-flex size-9 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all hover:text-red-500/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
              type="button"
            >
              <Heart />
            </button>
            {/* Visual indicator - shows actual clickable area */}
            <div className="pointer-events-none absolute inset-0 border-2 border-red-500/50 border-dashed" />
          </div>
          <div className="text-center">
            <p className="font-medium text-sm">Without</p>
            <p className="text-muted-foreground text-xs">~36px hit area</p>
          </div>
        </div>

        {/* With touch-hitbox */}
        <div className="flex flex-col items-center gap-3">
          <div className="relative">
            <button
              aria-label="Like"
              className="touch-hitbox inline-flex size-9 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all before:border before:border-green-500/50 before:border-dashed hover:text-green-500/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
              type="button"
            >
              <Heart />
            </button>
          </div>
          <div className="text-center">
            <p className="font-medium text-sm">With touch-hitbox</p>
            <p className="text-muted-foreground text-xs">≥44px hit area</p>
          </div>
        </div>
      </div>

      <div className="max-w-md text-center">
        <p className="text-muted-foreground text-sm">
          The dashed borders show the actual clickable/tappable area.
          <span className="mt-1 block">Try tapping around the icons to feel the difference!</span>
        </p>
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add @caprice/touch-hitbox

@caprice-ui/tailwind

Install the following dependencies:

npm install @caprice-ui/tailwind

Copy and paste the following code into your project.

/**
 * @utility touch-hitbox
 * Expands the interactive area of an element to meet minimum touch target guidelines (≥44px on mobile).
 *
 * - Ensures accessible, forgiving hit targets for touch and pointer input.
 * - Does not visually alter the element, only increases the clickable/tappable area.
 * - Use on small buttons, icons, or controls to improve usability and meet accessibility standards.
 *
 * Reference: https://x.com/frederic_ooo/status/1952756133732483543
 */
@utility touch-hitbox {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 44px;
    min-width: 44px;
    z-index: 9999;
  }
}

Usage

Import the utility into your global.css file:

global.css

@import "tailwindcss";
@import "@caprice-ui/tailwind/utility/touch-hitbox";

Add the utility classes to your markup / components:

example.tsx

<button type="button" class="touch-hitbox">
  <Icon size="size-4">
</button>

Additionally, you can use the pointer-coarse: variant to apply the expanded touch target only on touchscreen devices:

example.tsx

// [!code word:pointer-coarse:touch-hitbox]
<button type="button" class="pointer-coarse:touch-hitbox">
  <Icon size="size-4">
</button>

import { Heart } from 'lucide-react'; export default function TouchHitboxDemo() { return ( <div className="flex flex-col items-center gap-8 py-8"> <div className="flex items-start gap-12"> {/* Without touch-hitbox */} <div className="flex flex-col items-center gap-3"> <div className="relative"> <button aria-label="Like" className="inline-flex size-9 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all hover:text-red-500/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0" type="button" > <Heart /> </button> {/* Visual indicator - shows actual clickable area */} <div className="pointer-events-none absolute inset-0 border-2 border-red-500/50 border-dashed" /> </div> <div className="text-center"> <p className="font-medium text-sm">Without</p> <p className="text-muted-foreground text-xs">~36px hit area</p> </div> </div> {/* With touch-hitbox */} <div className="flex flex-col items-center gap-3"> <div className="relative"> <button aria-label="Like" className="touch-hitbox inline-flex size-9 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all before:border before:border-green-500/50 before:border-dashed hover:text-green-500/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0" type="button" > <Heart /> </button> </div> <div className="text-center"> <p className="font-medium text-sm">With touch-hitbox</p> <p className="text-muted-foreground text-xs">≥44px hit area</p> </div> </div> </div> <div className="max-w-md text-center"> <p className="text-muted-foreground text-sm"> The dashed borders show the actual clickable/tappable area. <span className="mt-1 block">Try tapping around the icons to feel the difference!</span> </p> </div> </div> ); }

Installation

Install the following dependencies:

Copy and paste the following code into your project.

Usage

On this page

Contribute