// Navigation

Link Overlay

Makes the whole card or article clickable.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/link-overlay

// Usage

1import { LinkBox, LinkOverlay } from "@/components/ui/link-overlay";
2
3<LinkBox />

// Code

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import type React from "react";
5import { cn } from "@/lib/utils";
6
7export const LinkBox = (props: React.ComponentProps<typeof ark.div>) => {
8  const { className, ...rest } = props;
9
10  return (
11    <ark.div
12      className={cn(
13        "relative",
14        "[&_a[href]:not([data-slot=link-overlay])]:relative [&_a[href]:not([data-slot=link-overlay])]:z-1",
15        className
16      )}
17      data-slot="link-box"
18      {...rest}
19    />
20  );
21};
22
23export const LinkOverlay = (props: React.ComponentProps<typeof ark.a>) => {
24  const { className, ...rest } = props;
25
26  return (
27    <ark.a
28      className={cn(

// Dependencies

@ark-ui/react