Hitbox

Kudos to Kian Bazza for the original implementation.

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/hitbox.json

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