Link
Create clickable hyperlinks in the terminal using OSC 8 escape sequences, supported by many modern terminal emulators.
Terminal
Installation
npx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/link.jsonnpx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/link.jsonpnpm dlx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/link.jsonbunx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/link.jsonUsage
"use client";
import dynamic from "next/dynamic";
const Terminal = dynamic(() => import("./terminal"), {
ssr: false,
});
export default function Home() {
return <Terminal />;
}"use client";
import { Box } from "ink";
import { InkXterm } from "ink-web";
import { Link } from '@/components/ui/link'
import "ink-web/css";
import "xterm/css/xterm.css";
export default function Terminal() {
return (
<InkXterm focus>
<Box flexDirection="column">
<Link url="https://github.com">GitHub</Link>
</Box>
</InkXterm>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to display as the link text |
url | string | - | The URL to link to |
Examples
Basic Link
<Link url="https://github.com">GitHub</Link>Inline Link
Combine with text for inline links:
<Box>
<Text>Check out </Text>
<Link url="https://github.com">GitHub</Link>
<Text> for more info.</Text>
</Box>Multiple Links
<Box flexDirection="column" gap={1}>
<Link url="https://github.com">GitHub</Link>
<Link url="https://twitter.com">Twitter</Link>
<Link url="https://linkedin.com">LinkedIn</Link>
</Box>Navigation Menu
<Box flexDirection="column">
<Text bold>Quick Links:</Text>
<Box flexDirection="column" paddingLeft={2}>
<Link url="https://docs.example.com">Documentation</Link>
<Link url="https://api.example.com">API Reference</Link>
<Link url="https://support.example.com">Support</Link>
</Box>
</Box>Notes
- Links use OSC 8 escape sequences which are supported by modern terminal emulators like iTerm2, Windows Terminal, GNOME Terminal, and others
- In unsupported terminals, the text displays without link functionality
- The demo above shows the visual appearance - actual clickable links require a supporting terminal
- Works seamlessly with Ink's layout system (
Box,Text, etc.)