Component

Docs link

External documentation link with an arrow.

Text reference Source and examples as JSON

npx -y github:anwarlemu/opencommerce-brand-cli#release add docs-link --surface site

Run from the target React 19.2+ app root with Tailwind CSS 4 and the @/* source alias.

docs-link.preview

Read the docs Make your first purchase

Usage

use-it-for.md

Use to link to a guide or reference in a new tab. Provide the destination URL and a descriptive label.

never.md

Links styled as buttons
Arrows on links that stay on the site
Underlines in ink

Exports: DocsLink. Read the examples for composition and props.

Dependencies: lucide-react.

Example

examples/docs-link.tsx

import { DocsLink } from "@/components/ui/docs-link";

export function Site() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <DocsLink href="https://agentcard.sh">Read the docs</DocsLink>
      <DocsLink href="https://agentcard.sh">Make your first purchase</DocsLink>
    </div>
  );
}

Source

components/ui/docs-link.tsx

import * as React from "react";
import { ArrowUpRight } from "lucide-react";

import { cn } from "@/lib/utils";

// A link out to the docs or a guide: 14px Inter in ink on a blue underline, the text turning blue under the pointer
// (160ms ease-out), and an arrow pointing out that stays still (only its color follows). Opens in a new tab.
function DocsLink({ className, children = "Read the docs", ...props }: React.ComponentProps<"a">) {
  return (
    <a
      target="_blank"
      rel="noopener noreferrer"
      data-slot="docs-link"
      className={cn(
        "group inline-flex w-fit shrink-0 items-center gap-1 font-sans text-body-sm whitespace-nowrap text-fg underline decoration-line-brand decoration-1 underline-offset-4 transition-[color] duration-160 ease-out outline-none hover:text-fg-brand focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus-ring",
        className,
      )}
      {...props}
    >
      {children}
      <ArrowUpRight
        className="size-3.5 shrink-0"
        strokeWidth={1.75}
        aria-hidden
      />
    </a>
  );
}

export { DocsLink };

Reference: Extension from opencommerce-agentcard-web src/components/site-footer.tsx (links).