Hit Area
Shadcn-installable Tailwind CSS v4 utilities for expanding interactive hit areas without changing layout.
Hit Area packages the pseudo-element pattern from CSS UI Enforcement into a Tailwind v4 utility set. The utility adds an absolutely positioned ::before box around the interactive element, so small controls can meet real pointer/touch target expectations without changing the visible layout, spacing, or component geometry. Source: bazza.dev, 2026-07-04
Install
Install through the shadcn registry:
npx shadcn@latest add https://bazza.dev/r/hit-area
Current source snapshot as of 2026-07-04:
| Field | Snapshot |
|---|---|
| Registry item | hit-area |
| Author | Kian Bazarjani |
| Type | registry:component |
| Distribution | Hosted shadcn registry JSON at https://bazza.dev/r/hit-area |
| Version surface | No public package or repo tag exposed for this item; versioned install surface is the shadcn CLI |
| CLI snapshot | shadcn@4.13.0 latest on npm; Node engine >=20.18.1 |
Source: bazza.dev registry JSON; npm registry shadcn, 2026-07-04
Utility Surface
| Utility | Purpose |
|---|---|
hit-area |
Enables the pseudo-element hit area with explicit CSS variables. |
hit-area-* |
Expands all sides using Tailwind spacing or arbitrary values. |
hit-area-l-*, hit-area-r-*, hit-area-t-*, hit-area-b-* |
Expands one side. |
hit-area-x-*, hit-area-y-* |
Expands horizontal or vertical sides. |
hit-area-debug |
Shows the invisible target box with dashed debug styling. |
Use this when the same hit-area expansion repeats across component families: icon buttons, checkboxes in tables, dense sidebars, compact command rows, pagination controls, and small tool buttons. For one-off controls, Tailwind pseudo utilities are still fine; once the pattern repeats, this registry item keeps the API readable and reviewable.
Boundary
Hit-area expansion should increase the user's intended target, not steal neighboring intent zones. In dense lists, sidebars, toolbars, and tables, verify hover, focus-visible, and click behavior with the debug utility before treating the target as fixed. The utility solves geometry; Details That Make Interfaces Feel Better still owns visible states, pressed feedback, focus treatment, and layout-shift checks.
Timeline
- 2026-07-04 | Promoted from Kevin's X bookmark after source review of the article and live shadcn registry item. Current install surface is
npx shadcn@latest add https://bazza.dev/r/hit-area;shadcn@4.13.0was latest on npm when checked. Source: X/@heyImMapleLeaf, 2026-03-13; Source: bazza.dev registry JSON, 2026-07-04