shadcn.io is not affiliated with official shadcn/ui

Shadcn Link Overlay for React and Tailwind

Makes the whole card or article clickable.

This sofa is perfect for modern tropical spaces, baroque inspired spaces.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/link-overlay.json

pnpm dlx shadcn@latest add https://kit.dev/r/link-overlay.json

npx shadcn@latest add https://kit.dev/r/link-overlay.json

yarn shadcn@latest add https://kit.dev/r/link-overlay.json

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/link-overlay.tsx

"use client";

import { ark } from "@ark-ui/react/factory";
import type React from "react";
import { cn } from "@/lib/utils";

export const LinkBox = (props: React.ComponentProps<typeof ark.div>) => {
  const { className, ...rest } = props;

  return (
    <ark.div
      className={cn(
        "relative",
        "[&_a[href]:not([data-slot=link-overlay])]:relative [&_a[href]:not([data-slot=link-overlay])]:z-1",
        className
      )}
      data-slot="link-box"
      {...rest}
    />
  );
};

export const LinkOverlay = (props: React.ComponentProps<typeof ark.a>) => {
  const { className, ...rest } = props;

  return (
    <ark.a
      className={cn(
        "static",
        "-mx-1 -my-0.5 px-1 py-0.5",
        "rounded-md border border-transparent",
        "before:absolute before:inset-0 before:z-0 before:block before:h-full before:w-full before:cursor-inherit before:content-['']",
        "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring/32",
        className
      )}
      data-slot="link-overlay"
      {...rest}
    />
  );
};

Update the import paths to match your project setup.

Anatomy

LinkBox
└── LinkOverlay

Usage

import { 
  LinkBox, 
  LinkOverlay
} from "@/components/ui/link-overlay";

<LinkBox>
  <h2>
    <LinkOverlay href="/blog/post-1">
      Blog Post Title
    </LinkOverlay>
  </h2>
</LinkBox>

Accessibility

Wrapping a whole card in <a> — Screen readers announce all card content as link text (verbose, confusing).
LinkOverlay — Keeps the link on the heading only. Announcements stay short.
Full area clickable — The overlay makes the whole card clickable without extra markup.
Inner links — Stay above the overlay and remain focusable. Users can tab between multiple links instead of one.

Link

The asChild prop renders another element with link overlay styling.

Examples

Article

A blog-style article with metadata, heading, description, and an inner link that stays clickable above the overlay.

Always use Link

By default the LinkOverlay component will render an a tag.

To use the Next.js (or any other) Link component, make the following updates to link-overlay.tsx.

components/ui/link-overlay.tsx

+ import Link from "next/link"
- import { ark } from "@ark-ui/react/factory"

- export const LinkOverlay = (props: React.ComponentProps<typeof ark.a>) => {
+ export const LinkOverlay = (props: React.ComponentProps<typeof Link>) => {
  const { className, ...rest } = props;

  return (
-    <ark.a
+    <Link
      ...

API Reference

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

LinkOverlay

Prop	Type	Default
`href`	`string`	required
`className`	`string`	-
`asChild`	`boolean`	`false`

Keyboard Table

Listbox