Skip to content

shadcn.io is not affiliated with official shadcn/ui

Components

Free

Hitbox for Radix UI

Grow a control's click and tap area past its edges, on any side or axis, without moving the layout. For React with Tailwind CSS v4, around small icons.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";
const Example = () => {
  const [show, setShow] = React.useState(true);

  return (
    <div className="relative flex size-full items-center justify-center">
      <div className="absolute top-2 right-2">
        <Field orientation="horizontal">
          <Switch
            checked={show}
            onCheckedChange={({ checked }) => setShow(checked)}
          />
          <FieldLabel>Show hitbox</FieldLabel>
        </Field>
      </div>

      <Button
        className={cn("group/hitbox hitbox-6 w-28", { "hitbox-debug": show })}
        clickEffect={false}
        size="lg"
      >
        <span className="font-mono group-hover/hitbox:hidden">hit-area-6</span>
        <span className="not-group-hover/hitbox:hidden group-active:hidden">
          Hovered
        </span>
        <span className="not-group-active/hitbox:hidden">Pressed</span>
      </Button>
    </div>
  );
};

Demos

Axes

Basic

Custom

Debug

Sides

FAQ

What does Hitbox do?

It enlarges the area that reacts to the pointer around a control, without changing its size or the layout. A hitbox-4 class on a small icon button adds 1rem of clickable space on every side.

How does it work without moving the layout?

The utility makes the element position: relative and adds an invisible ::before that extends past the edges by the amount you choose, with negative offsets. The layout does not move, and clicks on that pseudo-element count as clicks on the control.

How do I extend only one side or one axis?

Use hitbox-x-* or hitbox-y-* for an axis, and hitbox-t-*, hitbox-b-*, hitbox-l-* or hitbox-r-* for one side. hitbox-* does all four. The left and right classes are physical, so they do not flip in a right-to-left layout.

What values can the class take?

A Tailwind spacing number, as in hitbox-6, or an arbitrary value such as hitbox-[21px]. The Custom demo shows the bracket form.

How do I see the hit area?

Add hitbox-debug to the element. It draws the area with a dashed info-colored border, and a success color on hover. Remove the class when you are done; it is meant for development.

Which elements can take a hitbox class?

Any element that can have a ::before: buttons, links, list rows, wrappers. It sets position: relative on the element. Replaced elements such as img and input draw no pseudo-element, so put the class on a wrapper or the label around them.

How do I install Hitbox in React?

Run the command in the Installation section on this page. It adds CSS utilities to your global stylesheet and no component file, so it works with any element, whatever the component library.

API Reference

Hitbox

ClassType
hitboxclass
hitbox-*class
hitbox-b-*class
hitbox-debugclass
hitbox-l-*class
hitbox-r-*class
hitbox-t-*class
hitbox-x-*class
hitbox-y-*class