Hyperlink

An inline link whose underline draws in from the left and exits to the right, with a springy arrow nudge and a hover or focus preview card for the destination.

We built this site on Next.js (opens in a new tab), animate everything with Motion (opens in a new tab) and keep the rest in the docs.

Open

href

previewTitle

previewDescription

color

delay250

Installation

npx shadcn@latest add @glint-ui/hyperlink

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/hyperlink.json

Usage

import { Hyperlink } from "@/components/ui/hyperlink";

<Hyperlink href="https://nextjs.org" previewTitle="Next.js" previewDescription="The React framework.">
  Next.js
</Hyperlink>

Props

Prop	Type	Default	Description
href	string	"https://nextjs.org"	Destination. http(s) links open in a new tab and show the arrow.
previewTitle	string	"Next.js by Vercel"	Preview card headline. Omit title and description for no card.
previewDescription	string	"The React framework for the web: routing, rendering and bundling out of the box."	Preview card body.
color	string	"currentColor"	Underline and arrow CSS color.
arrow	ReactNode	—	Boolean. Show the nudging arrow; defaults to true for http(s) links.
delay	number	250	Ms of hover before the card opens.
children	ReactNode	—	Link text.
className	string	—	Extra classes for the root element.