Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Components

Free

Hitbox for Ark UI

Expand hit areas of interactive elements without affecting layout.

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