Balick UI

Underline Link

A link whose underline draws in from the left on hover and focus, and leaves to the right.

Open in
Read the changelog

Installation#

pnpm dlx shadcn@latest add @balick/underline-link

Or pass the full URL: https://ui.balick.me/r/underline-link.json

Usage#

import Link from "next/link"

import { UnderlineLink, underlineLinkClassName } from "@/components/ui/underline-link"

export function Links() {
  return (
    <>
      <UnderlineLink href="https://github.com">GitHub</UnderlineLink>
      <Link href="/changelog" className={underlineLinkClassName}>Changelog</Link>
    </>
  )
}

Props#

<UnderlineLink />

PropTypeDefault
...props

Any anchor attribute, such as href.

ComponentProps<"a">—

<underlineLinkClassName />

PropTypeDefault
string

The classes that draw the underline, for your router's link component.

string—