Link Overlay

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/link-overlay

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.

+ 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#

LinkBox#

LinkOverlay#