Navigates somewhere else, inline or in chrome, with real link semantics.
import { Link } from "@/fragments/ui";Source<Link href="#">Learn more about our services</Link>npx @usefragments/cli add linkWrites src/fragments/ui/components/Link plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Accent, then neutral, then the quietest neutral.
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="md" align="center" wrap>
<Link href="#" tone="accent">Accent</Link>
<Link href="#" tone="neutral">Neutral</Link>
<Link href="#" tone="neutral" color="tertiary">Tertiary</Link>Four rules for when the line shows.
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="md" align="center" wrap>
<Link href="#" underline="always">Always underlined</Link>
<Link href="#" underline="hover">Underline on hover</Link>
<Link href="#" underline="dotted">Dotted underline</Link>Sets target and rel; you still supply the visible cue.
<Link href="https://example.com" external>
View documentation ↗
</Link>Paints Link styling onto a router link and keeps both click handlers.
<Link asChild tone="neutral" onClick={() => {}}>
<a href="#pricing" onClick={() => {}}>
Client-side navigation
</a>
</Link>Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Link text content |
tone | enumaccentneutral | accent | Colour. accent is the link ink; neutral reads as body text until hovered |
color | enumprimarysecondarytertiary | Not set | Text-hierarchy colour for a neutral link (Text color axis); tertiary is the quietest link |
underline | enumalwayshovernonedotted | hover | Underline behavior |
external | boolean | false | Opens in new tab with noopener noreferrer |
asChild | boolean | false | Render as child element (polymorphic). Merges link props/classes and composes event handlers onto the single child (e.g. Next.js Link). |
className | string | Not set | Additional class name |
style | object | Not set | Inline styles |
target | union | Not set | — |
rel | string | Not set | — |