# Link Spread

An absolute positioned anchor that makes an entire container clickable.

## Installation

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

[Registry JSON](https://reactdocs.canceydejean.dev/r/link-spread.json)

## Preview

```tsx
import LinkSpread from "@/components/ui/link-spread/link-spread";

export function Preview() {
  return (
    <article className="relative w-full max-w-sm overflow-hidden rounded-xl border border-border bg-card text-card-foreground 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-sm text-muted-foreground">
          The entire card is clickable via LinkSpread.
        </p>
      </div>
      <LinkSpread href="#" aria-label="View card" />
    </article>
  );
}
```


## Source

### link-spread.tsx

```tsx
import { cn } from "cn";

export default function LinkSpread({
  className,
  href,
  newTab,
  ...props
}: React.ComponentProps<"a"> & {
  newTab?: boolean;
}) {
  return (
    <a
      data-slot="link-spread"
      href={href || "#"}
      className={cn(
        "absolute inset-0 z-10",
        href ? "pointer-events-auto" : "pointer-events-none",
        className,
      )}
      target={newTab ? "_blank" : "_self"}
      {...props}
    />
  );
}
```



## Usage

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

```tsx
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>
  );
}
```