Link

Navigation

An inline anchor styled with the primary color.

Link is a lightweight anchor for in-page and cross-page navigation. It underlines on hover and can render in a muted variant.

npx shadcn@latest add link

Default

A primary link with a trailing arrow.

Preview

Live

tsx

1<Link href="/docs">
2  Read the docs <ArrowRight className="size-4" />
3</Link>
4<Link href="/references" variant="muted">Skip to references</Link>

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
variant	"default" \| "muted"= "default"	The visual style of the link.
href	string	The destination URL.
className	string	Override the classes of the anchor.