Hitbox
Expands the hit area around a control without changing its look.
Preview
import { Button } from "@/components/ui/Button";
import { Hitbox } from "@/components/ui/Hitbox";
export function HitboxDemo() {
return (
<Hitbox>
<Button type="button" size="sm">
Add
</Button>
</Hitbox>
)
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/hitboxManual
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Hitbox component into your components/ui/Hitbox.tsx file.
"use client";
import * as React from "react";
import { cn } from "@/utils/class-names";
function Hitbox({ children }: { children: React.ReactElement<{ className?: string }> }) {
return React.cloneElement(children, {
className: cn(
children.props.className,
"relative before:absolute before:-inset-1 before:content-['']",
),
});
}
export { Hitbox };