Hitbox

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

Last updated August 12, 2026

CreditsUnchangedPublished

Copied from Dice UI.

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

$ npx shadcn@latest add https://ui.persian-labs.ir/r/hitbox.json

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

Hitbox

Prop	Type	Default	Description
size	"sm" \| "default" \| "lg" \| string	"default"	How far the hitbox extends beyond the child. Pass a CSS length for a custom size.
position	"all" \| "top" \| "bottom" \| "left" \| "right" \| "vertical" \| "horizontal"	"all"	Which side or sides of the child receive the extended area.
radius	"none" \| "sm" \| "md" \| "lg" \| "full"	"none"	Corner radius applied to the extended area.
debug	boolean	false	Shows the hitbox with a dashed red outline and translucent fill for development.
className	string	undefined	Additional classes applied to the child element.

Edit this page on GitHub

PreviousIranian Bank NextNational ID