480
Sponsor

Link

PreviousNext

OSC 8 clickable hyperlink

InkOpenTUI
Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/link

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 "@/components/ui/link";

export 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

Link

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