shadcn.io is not affiliated with official shadcn/ui

Shadcn Hitbox for React and Tailwind

Expand hit areas of interactive elements without affecting layout.

Show hitbox

Kudos to Kian Bazza for the original implementation.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/hitbox.json

pnpm dlx shadcn@latest add https://kit.dev/r/hitbox.json

npx shadcn@latest add https://kit.dev/r/hitbox.json

yarn shadcn@latest add https://kit.dev/r/hitbox.json

Import the following semantic color variables into your CSS file when using `hitbox-debug`

@theme inline {
  --color-info: var(--info);
  --color-success: var(--success);
}

:root {
  --info: var(--color-blue-500);
  --success: var(--color-emerald-500);
}

.dark {
  --info: var(--color-blue-500);
  --success: var(--color-emerald-500);
}

Import the following CSS rules into your `globals.css`

globals.css

@utility hitbox-debug {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: var(--hitbox-t, 0px);
    right: var(--hitbox-r, 0px);
    bottom: var(--hitbox-b, 0px);
    left: var(--hitbox-l, 0px);
    pointer-events: inherit;
    @apply border border-dashed border-info bg-info/10;
  }
  &:hover::before {
    @apply border border-dashed border-success bg-success/10;
  }
}
@utility hitbox {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: var(--hitbox-t, 0px);
    right: var(--hitbox-r, 0px);
    bottom: var(--hitbox-b, 0px);
    left: var(--hitbox-l, 0px);
    pointer-events: inherit;
  }
}
@utility hitbox-* {
  position: relative;
  --hitbox-t: calc(-1 * --spacing(--value(number, [*])));
  --hitbox-b: calc(-1 * --spacing(--value(number, [*])));
  --hitbox-l: calc(-1 * --spacing(--value(number, [*])));
  --hitbox-r: calc(-1 * --spacing(--value(number, [*])));
  &::before {
    content: "";
    position: absolute;
    top: var(--hitbox-t, 0px);
    right: var(--hitbox-r, 0px);
    bottom: var(--hitbox-b, 0px);
    left: var(--hitbox-l, 0px);
    pointer-events: inherit;
  }
}
@utility hitbox-l-* {
  position: relative;
  --hitbox-l: calc(-1 * --spacing(--value(number, [*])));
  &::before { content: ""; position: absolute; top: var(--hitbox-t, 0px); right: var(--hitbox-r, 0px); bottom: var(--hitbox-b, 0px); left: var(--hitbox-l, 0px); pointer-events: inherit; }
}
@utility hitbox-r-* {
  position: relative;
  --hitbox-r: calc(-1 * --spacing(--value(number, [*])));
  &::before { content: ""; position: absolute; top: var(--hitbox-t, 0px); right: var(--hitbox-r, 0px); bottom: var(--hitbox-b, 0px); left: var(--hitbox-l, 0px); pointer-events: inherit; }
}
@utility hitbox-t-* {
  position: relative;
  --hitbox-t: calc(-1 * --spacing(--value(number, [*])));
  &::before { content: ""; position: absolute; top: var(--hitbox-t, 0px); right: var(--hitbox-r, 0px); bottom: var(--hitbox-b, 0px); left: var(--hitbox-l, 0px); pointer-events: inherit; }
}
@utility hitbox-b-* {
  position: relative;
  --hitbox-b: calc(-1 * --spacing(--value(number, [*])));
  &::before { content: ""; position: absolute; top: var(--hitbox-t, 0px); right: var(--hitbox-r, 0px); bottom: var(--hitbox-b, 0px); left: var(--hitbox-l, 0px); pointer-events: inherit; }
}
@utility hitbox-x-* {
  position: relative;
  --hitbox-l: calc(-1 * --spacing(--value(number, [*])));
  --hitbox-r: calc(-1 * --spacing(--value(number, [*])));
  &::before { content: ""; position: absolute; top: var(--hitbox-t, 0px); right: var(--hitbox-r, 0px); bottom: var(--hitbox-b, 0px); left: var(--hitbox-l, 0px); pointer-events: inherit; }
}
@utility hitbox-y-* {
  position: relative;
  --hitbox-t: calc(-1 * --spacing(--value(number, [*])));
  --hitbox-b: calc(-1 * --spacing(--value(number, [*])));
  &::before { content: ""; position: absolute; top: var(--hitbox-t, 0px); right: var(--hitbox-r, 0px); bottom: var(--hitbox-b, 0px); left: var(--hitbox-l, 0px); pointer-events: inherit; }
}

Update the import paths to match your project setup.

Usage

<Button className="hitbox-6">Click me</Button>
<Checkbox className="hitbox-4" />
<a href="/page" className="hitbox-y-3 block py-2">Link</a>

Examples

Basic

Use hitbox-* to extend the hit area uniformly on all sides.

Individual sides

Target specific sides with hitbox-l-*, hitbox-r-*, hitbox-t-*, and hitbox-b-*.

Horizontal and vertical

Use hitbox-x-* and hitbox-y-* for axis shorthands.

Custom values

Use arbitrary values with bracket syntax.

Debugging

Add hitbox-debug to visualize the expanded hit area.

Use hitbox-y-* so adjacent items feel continuous.

API Reference

Class	Expansion
`hitbox`	Base (no expansion)
`hitbox-*`	All sides (spacing or `[value]`)
`hitbox-l-*`	Left
`hitbox-r-*`	Right
`hitbox-t-*`	Top
`hitbox-b-*`	Bottom
`hitbox-x-*`	Left and right
`hitbox-y-*`	Top and bottom
`hitbox-debug`	Debug overlay

Highlight

JSON Tree View