docs/utilities/hitbox
Sections
Components
Utilities
Forms
Hooks
Copy Markdown
Expand hit areas of interactive elements without affecting layout.
PreviewCode
Show hitbox
hit-area-6HoveredPressed
Kudos to Kian Bazza for the original implementation.
CLIManual
pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/hitbox
<Button className="hitbox-6">Click me</Button>
<Checkbox className="hitbox-4" />
<a href="/page" className="hitbox-y-3 block py-2">Link</a>
Use hitbox-* to extend the hit area uniformly on all sides.
PreviewCode
Show hitbox
Small target
Target specific sides with hitbox-l-*, hitbox-r-*, hitbox-t-*, and hitbox-b-*.
PreviewCode
Show hitbox
LeftTopBottomRight
Use hitbox-x-* and hitbox-y-* for axis shorthands.
PreviewCode
Show hitbox
Left and rightTop and bottom
Use arbitrary values with bracket syntax.
PreviewCode
Show hitbox
CustomLeft only, custom
Add hitbox-debug to visualize the expanded hit area.
PreviewCode
Show hitbox
Show hit area
Use hitbox-y-* so adjacent items feel continuous.
PreviewCode
Show hitbox
| Class | Expansion |
|---|---|
hitbox | Base (no expansion) |
hitbox-* | All sides (spacing or [value]) |
hitbox-l-* | Left |
hitbox-r-* | Right |
hitbox-t-* | Top |
hitbox-b-* | Bottom |
hitbox-x-* | Left and right |
hitbox-y-* | Top and bottom |
hitbox-debug | Debug overlay |
[
Previous page
Highlight ](/docs/utilities/highlight)[
Next page
JSON Tree View ](/docs/utilities/json-tree-view)
On This Page
InstallationUsageExamplesBasicIndividual sidesHorizontal and verticalCustom valuesDebuggingSidebar navigationAPI Reference