Navigation
Link
Text links carry no decoration until the pointer arrives, then the underline grows left to right out of a background-size transition, so nothing on the line shifts. Dropping the standing underline keeps a paragraph readable when it holds several links, and the hover is what confirms the target. External links add a small arrow that leans away, so a new tab is never a surprise.
npx shadcn@latest add @minflow/linkWhere to use it
- Inline references inside running prose.
- Cross-references and anchors between documentation pages.
- Never for an action; anything that changes state is a button, even when it looks like a word in a sentence.
Variations
In a sentence
The default. The link sits in prose and picks up its underline only under the pointer.
Leaving the site
When the target opens in a new tab. The arrow says so before the click, and the rel attribute is set for you.
On its own line
For a link that is the whole point of its row, such as a jump target or a closing pointer to related reading.