1Sponsor

Link

OSC 8 clickable hyperlink

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/link.json

Usage

import { Link } from "@/components/ui/link";
<Link href="https://github.com">GitHub</Link>

Examples

Show URL and terminals without OSC 8

showHref appends the URL in dim text. When the terminal does not support OSC 8 hyperlinks, the same fallback is used unless you set fallback={false} or pass a custom fallback function.

Terminal
import { Box } from "ink";

import { SITE } from "@/constants/site";
import { Link } from "@/registry/ui/link";

export default function LinkShowHref() {
  return (
    <Box flexDirection="column" gap={1}>
      <Link href={SITE.URL}>termcn</Link>
      <Link href="https://github.com/vadimdemedes/ink" showHref>
        Ink
      </Link>
    </Box>
  );
}

API Reference

PropTypeDefault
childrenReactNoderequired
hrefstringrequired
colorstringundefined
showHrefbooleanfalse
fallbackboolean | ((text: string, url: string) => string)true