Hitbox

Kudos to Kian Bazza for the original implementation.

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/hitbox

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.

Sidebar navigation#

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

API Reference#