gridland
Components

Link

A clickable hyperlink with configurable underline style

A clickable hyperlink for terminal UIs with configurable underline style and color.

Link
?

Run demo

Terminal
bunx @gridland/demo link
Terminal
curl -fsSL https://raw.githubusercontent.com/thoughtfulllc/gridland/main/scripts/run-demo.sh | bash -s link

Installation

bunx shadcn@latest add @gridland/link

Usage

import { Link } from "@/components/ui/link"
<Link url="https://opentui.com">Visit opentui.com</Link>

Examples

Underline Styles

Use the underline prop to change the underline rendering.

Underline styles
<Link url="https://example.com" underline="solid">Solid underline</Link>
<Link url="https://example.com" underline="dashed">Dashed underline</Link>
<Link url="https://example.com" underline="dotted">Dotted underline</Link>
<Link url="https://example.com" underline="none">No underline</Link>

Custom Color

Override the default theme color.

Custom color
<Link url="https://example.com" color="#05FFA1">Green link</Link>
<Link url="https://example.com" color="cyan">Cyan link</Link>

API Reference

PropTypeDefaultDescription
childrenReactNode-Link text content
urlstring-Target URL
underline"solid" | "dashed" | "dotted" | "none""solid"Underline style
colorstringtheme.accentLink text color