Link Overlay

Copy Markdown

Makes the whole card or article clickable.

PreviewCode

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

Buy nowAdd to cart

Installation#

CLIManual

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.

PreviewCode

Simple blog post title

This is a awesome blog post!

Inner link

Examples#

Article#

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

PreviewCode

3 days ago

Learn how to construct a screen reader friendly link overlay for accessibility and usability.

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`

[

Kbd ](/docs/components/kbd)[

Listbox ](/docs/components/listbox)

On This Page

Installation Anatomy Usage Accessibility Link Examples Article Always use Link API Reference LinkBox LinkOverlay