Primitive / Atomstable

Link

Tokenized anchor primitive with focus ring and variant surfaces.

@glinui/uiComponent: link

Installation$

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add link

Usage$

Link renders a native <a> element with Glin UI tokens applied — consistent focus ring, variant surfaces, and optional underline decoration. Import it as GlinLink in Next.js projects to avoid a naming conflict with the Next.js Link component.

Basic$

Visit the docs

TSX

1import { Link } from "@glinui/ui"
2
3export function LinkBasicDemo() {
4return <Link href="#">Visit the docs</Link>
5}

Examples$

Variants$

Default Glass Outline Ghost

TSX

1import { Link } from "@glinui/ui"
2
3export function LinkVariantDemo() {
4return (
5  <div className="flex flex-wrap gap-4">
6    <Link href="#" variant="default">Default</Link>
7    <Link href="#" variant="glass">Glass</Link>
8    <Link href="#" variant="outline">Outline</Link>
9    <Link href="#" variant="ghost">Ghost</Link>
10  </div>
11)
12}

Without Underline$

Disable the underline decoration for inline link usage or icon-only anchors.

With underline Without underline

TSX

1import { Link } from "@glinui/ui"
2
3export function LinkNoUnderlineDemo() {
4return (
5  <div className="flex flex-wrap gap-4">
6    <Link href="#">With underline</Link>
7    <Link href="#" underline={false}>Without underline</Link>
8  </div>
9)
10}

Sizes$

Small Medium Large

TSX

1import { Link } from "@glinui/ui"
2
3export function LinkSizeDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-4">
6    <Link href="#" size="sm">Small</Link>
7    <Link href="#" size="md">Medium</Link>
8    <Link href="#" size="lg">Large</Link>
9  </div>
10)
11}

External Link$

Pass standard anchor attributes like target and rel for external URLs.

Open Glin UI site ↗

TSX

1import { Link } from "@glinui/ui"
2
3export function LinkExternalDemo() {
4return (
5  <Link href="https://glinui.dev" target="_blank" rel="noopener noreferrer">
6    Open Glin UI site ↗
7  </Link>
8)
9}

Accessibility$

Link renders a native <a> element, which is keyboard-focusable by default.
A visible focus ring is applied via the design token system — do not suppress it with outline-none without a custom focus style.
For external links, always include rel="noopener noreferrer" to prevent tab-napping.
If the link text is not self-descriptive (e.g. "click here"), add an aria-label describing the destination.

Reduced Motion$

Link has no animation and is unaffected by prefers-reduced-motion.

API Reference$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from linkVariants.
`underline`	`"true" \| "false"`	No	`true`	Variant option from linkVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`"default"`	Variant option from linkVariants.

Source$

TSX

1import { Link } from "@glinui/ui"

packages/ui/src/components/link.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/link.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

LinkProps

`LinkProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from linkVariants.
`underline`	`"true" \| "false"`	No	`true`	Variant option from linkVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`"default"`	Variant option from linkVariants.