Cite
Running copy
Read the install notes. The link is ink, never a second color.
Text link
Navigates to a page or resource. Hairline underline; in-copy variant is inset 1px.
Preview
In action
Open the kit
When to use
Use it for
- Navigation to another page or anchor.
- underline for links inside running copy.
Not for
- Actions that do not change the URL; use Button.
- Bare hrefs with "click here" text; the text should name the destination.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { Link } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/link.
2. Vendor the source
npx @noorddev/vlak-cli add link
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/link.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { Link } from "@noorddev/vlak-react";
<Link href="/docs">A text link</Link>
<p>Read the <Link underline href="/docs">guide</Link> first.</p>Props
Link
Text link with a hairline underline. In-copy variant is inset 1px.
| Prop | Type | Default | Description |
|---|---|---|---|
underline | boolean | false | In-copy gradient underline, inset 1px. |
Also accepts AnchorHTMLAttributes<HTMLAnchorElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves focus to the link |
| Enter | Follows it |
Accessibility
- Renders a native <a>; it needs an href to be focusable.
- 2px ink focus ring on :focus-visible.
Markup
<div><a class="rs-link" href="#">A text link</a></div> <div><a class="rs-link-underline" href="#">An in-copy link</a></div>
Classes
.rs-link.rs-link-underline