Core

Text link

A text link. All native anchor props (href, target, rel…) are passed through. Named TextLink so it never clashes with Next.js Link: use both together with asChild.

Read the installation guide, browse all components or go back up.

demos/text-link.tsx

import Link from "next/link";
import { TextLink } from "pixelbits/text-link";

export default function Demo() {
  return (
    <p className="text-sm">
      Read the <TextLink href="#install">installation guide</TextLink>, browse{" "}
      <TextLink variant="pixel" asChild>
        <Link href="/docs/">all components</Link>
      </TextLink>{" "}
      or{" "}
      <TextLink variant="plain" href="#top">
        go back up
      </TextLink>
      .
    </p>
  );
}

Installation

npm: import

import { TextLink } from "pixelbits/text-link";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/text-link.json

API

<TextLink>

A text link. All native anchor props (href, target, rel…) are passed through. Named TextLink so it never clashes with Next.js Link: use both together with asChild.

Example

<TextLink href="/docs">Read the docs</TextLink>
<TextLink variant="pixel" asChild><Link href="/about">About</Link></TextLink>

Prop Type Default Description

variant

"underline" | "pixel" | "plain"

"underline"

Prop	Type	Default	Description
variant	"underline" \| "pixel" \| "plain"	"underline"	Decoration. `"underline"`: a quiet underline that turns to the accent on hover. `"pixel"`: a hairline that fills in eight pixel steps on hover or focus. `"plain"`: no decoration (navigation, cards); color changes on hover.
asChild	boolean	false	Render the only child element (for example Next.js `<Link>`) with the link styles instead of an `<a>`.

Decoration.

"underline": a quiet underline that turns to the accent on hover.
"pixel": a hairline that fills in eight pixel steps on hover or focus.
"plain": no decoration (navigation, cards); color changes on hover.

asChild

boolean

false

Render the only child element (for example Next.js <Link>) with the link styles instead of an <a>.

Also accepts every prop of AnchorHTMLAttributes<HTMLAnchorElement>.