Components
Link
A clickable hyperlink with configurable underline style
A clickable hyperlink for terminal UIs with configurable underline style and color.
Link
Run demo
bunx @gridland/demo linkcurl -fsSL https://raw.githubusercontent.com/thoughtfulllc/gridland/main/scripts/run-demo.sh | bash -s linkInstallation
bunx create-gridland add linkUsage
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.
<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.
<Link url="https://example.com" color="#05FFA1">Green link</Link>
<Link url="https://example.com" color="cyan">Cyan link</Link>Inline with Text
Embed a link within a line of text using <span> siblings.
<text>
<span>Check out </span>
<Link url="https://opentui.com">opentui.com</Link>
<span> for more info.</span>
</text>Multiple Links
<box flexDirection="row" gap={2}>
<Link url="https://github.com" underline="solid">GitHub</Link>
<Link url="https://docs.example.com" underline="dashed" color="cyan">Docs</Link>
<Link url="mailto:team@example.com" underline="dotted" color="#feca57">Contact</Link>
</box>API Reference
Link
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Link text content |
url | string | - | Target URL |
underline | "solid" | "dashed" | "dotted" | "none" | "solid" | Underline style |
color | string | theme.accent | Link text color |