Hitbox

A utility component that extends the clickable area of child elements for improved accessibility and user experience.

Default Size

Full Radius

Bottom Position

Installation

pnpm dlx shadcn@latest add @diceui/hitbox

Import the component and wrap it around any interactive element.

import { Hitbox } from "@/components/hitbox";
 
<Hitbox>
  <Button />
</Hitbox>

Control the size of the extended hitbox area.

default

10px

Control which sides of the element the hitbox extends to.

Control the border radius of the hitbox area.

Enable debug mode to visualize the hitbox area during development.

debug=false

debug=true

The main hitbox component that extends the clickable area of its child element.

Prop

Type

The hitbox provides three predefined sizes:

sm: 8px extension - Minimal extension for elements that need slight touch area improvement
default: 12px extension - Standard extension that helps most elements meet accessibility requirements
lg: 16px extension - Generous extension for dense interfaces or critical interactive elements

You can also use custom CSS values for precise control:

<Hitbox size="18px">
  <Checkbox />
</Hitbox>

The Hitbox component improves accessibility by:

Larger touch targets: Extends clickable areas to meet minimum touch target size requirements (44px × 44px recommended by WCAG)
Better mobile experience: Reduces precision required for touch interactions
Maintains semantics: Uses Radix UI's Slot component to preserve the underlying element's accessibility properties
Visual feedback: Debug mode helps developers ensure adequate touch target sizes

Small buttons (32px): Use default size (12px) to reach 56px total target
Default buttons (36px): Use default size (12px) to reach 60px total target
Large buttons (40px): Use sm size (8px) to reach 56px total target
Icon buttons: Use lg size (16px) for maximum accessibility

Use larger hitboxes for small interactive elements like checkboxes, icons, or close buttons
Consider different positions (top, bottom, left, right) based on surrounding content
Test with debug mode enabled to ensure adequate coverage
Be mindful of overlapping hitboxes that might interfere with each other