Anchor

Link with an animated underline and hover preview.

import { Anchor } from 'ui-lab-components/anchor';
import { Anchor } from 'ui-lab-components/anchor';
 
export default function Example() {
  return (
    <Anchor href="https://developer.mozilla.org">
      MDN documentation
      <Anchor.Preview>
        <span className="text-xs text-foreground-400">developer.mozilla.org</span>
      </Anchor.Preview>
    </Anchor>
  );
}

anchor/00-preview

A styled link with a custom animated underline and a popover preview on hover.

Loading interactive preview
"use client";
 
import { Anchor } from 'ui-lab-components/anchor';
 
export default function Example() {
  return (
    <Anchor>
      Hover me
      <Anchor.Preview>
        <div className="text-sm">Preview content</div>
      </Anchor.Preview>
    </Anchor>
  );
}

anchor/01-inline-text

Anchor used inline within a paragraph — the primary use case for navigational links.

Loading interactive preview
import { Anchor } from 'ui-lab-components/anchor';
 
export default function Example() {
  return (
    <p className="text-sm text-foreground max-w-prose leading-relaxed">
      Read the{" "}
      <Anchor href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">
        MDN documentation
      </Anchor>{" "}
      for a full reference on anchor semantics, or check the{" "}
      <Anchor href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html">
        WCAG link purpose guidelines
      </Anchor>{" "}
      for accessibility requirements.
    </p>
  );
}

anchor/02-underline-variants

Three underline styles available via Anchor.Underline: solid (default), dashed, and dotted.

Loading interactive preview
import { Anchor } from 'ui-lab-components/anchor'
import { Flex } from 'ui-lab-components/flex';
 
export default function Example() {
  return (
    <Flex gap="lg" align-center>
      <Anchor href="#">
        Solid
      </Anchor>
      <Anchor href="#">
        <Anchor.Underline variant="dashed" />
        Dashed
      </Anchor>
      <Anchor href="#">
        <Anchor.Underline variant="dotted" />
        Dotted
      </Anchor>
    </Flex>
  );
}

anchor/03-preview-tooltip

Hover over the links to see a tooltip preview — composed via the preview prop or Anchor.Preview.

Loading interactive preview
import { Anchor } from 'ui-lab-components/anchor'
import { Flex } from 'ui-lab-components/flex';
 
export default function Example() {
  return (
    <Flex gap="lg" align-center>
      <Anchor
        href="https://github.com"
        preview={
          <span className="text-xs text-foreground-400">github.com</span>
        }
      >
        GitHub
      </Anchor>
      <Anchor href="https://vercel.com">
        <Anchor.Preview>
          <span className="text-xs text-foreground-400">vercel.com</span>
        </Anchor.Preview>
        Vercel
      </Anchor>
    </Flex>
  );
}

anchor/04-breadcrumb

Anchor used as navigational crumbs — the last segment is non-interactive text.

Loading interactive preview
import { Anchor } from 'ui-lab-components/anchor'
import { Flex } from 'ui-lab-components/flex';
 
const crumbs = [
  { label: 'Home', href: '/' },
  { label: 'Projects', href: '/projects' },
  { label: 'ui-lab', href: '/projects/ui-lab' },
];
 
export default function Example() {
  return (
    <Flex gap="xs" align-center className="text-sm">
      {crumbs.map((crumb, i) => (
        <span key={crumb.href} className="flex items-center gap-xs">
          {i > 0 && <span className="text-foreground-400 mx-1">/</span>}
          {i < crumbs.length - 1 ? (
            <Anchor href={crumb.href}>{crumb.label}</Anchor>
          ) : (
            <span className="text-foreground-400">{crumb.label}</span>
          )}
        </span>
      ))}
    </Flex>
  );
}