Hitbox

Wrap an interactive element to extend its clickable area without changing its visible size.

Last updated January 1, 1980

Overview

Hitbox preserves the child's semantics while adding an invisible touch target around it. Use its size, position, radius, and debug props to control the extended area.

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/hitbox

Layout

Import Hitbox and wrap it around any interactive element.

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

Examples

Sizes

Control how far the hitbox extends. Use sm, default, lg, or a custom CSS value.

Positions

Limit the extended hitbox to one or more sides of the element.

Radii

Match the extended area to the child’s corner radius.

Debug mode

Enable debug to visualize the normally invisible hitbox while developing.

API Reference