UI Lab | Anchor

Anchor

Link with animated underline and popover preview.

Hover me

import { Anchor } from "ui-lab-components";
 
export function Example() {
  return (
    <Anchor>
      Click me
      <Anchor.Preview>
        <div>Preview</div>
      </Anchor.Preview>
    </Anchor>
  );
}

Basic Anchor

A simple anchor component with custom underline. Hover to see the popover preview.

Learn more about this topic

import React from 'react';
import { Anchor } from 'ui-lab-components';
 
export default function Example() {
  return (
    <Anchor>
      Learn more about this topic
      <Anchor.Preview>
        <div className="text-sm">Preview content</div>
      </Anchor.Preview>
    </Anchor>
  );
}