Link Spread

An absolute positioned anchor that makes an entire container clickable.

Card title

The entire card is clickable via LinkSpread.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/link-spread.json

Usage

Use Link Spread inside a relatively positioned parent to make the full card surface clickable while keeping other content visible and accessible.

import LinkSpread from "@/components/link-spread/link-spread";

export function Example() {
  return (
    <article className="border-border bg-card text-card-foreground relative w-full max-w-sm overflow-hidden rounded-xl border shadow-sm">
      <img
        src="https://dummyimage.com/600x400/ababab/fff"
        alt="Link Spread demo"
        className="aspect-3/2 w-full object-cover"
      />
      <div className="space-y-1 p-4">
        <h3 className="text-lg leading-none font-semibold tracking-tight">
          Card title
        </h3>
        <p className="text-muted-foreground text-sm">
          The entire card is clickable via LinkSpread.
        </p>
      </div>
      <LinkSpread href="#" aria-label="View card" />
    </article>
  );
}