Link Overlay

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/link-overlay.json

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