Skip to content

shadcn.io is not affiliated with official shadcn/ui

Components

Free

Hitbox for Ark 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

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