Anchor

Usage

Basic usage example to quickly see how the Anchor works.

import { Anchor } from "@/ui/anchor";

function AnchorDemo() {
  return (
    <Anchor href="https://github.com/ilkhoeri/oeri" role="anchor" target="_blank">
      Anchor component
    </Anchor>
  );
}

Decoration

Underline always Underline hover Underline never

import { Anchor } from "@/ui/anchor";
import { Group } from "@/ui/group";

export function AnchorGroupDemo() {
  return (
    <Group justify="center">
      <Anchor href="https://github.com/ilkhoeri/oeri" target="_blank" underline="always">
        Underline always
      </Anchor>
      <Anchor href="tel:+" target="_tel" underline="hover">
        Underline hover
      </Anchor>
      <Anchor href="mailto:" target="_email" underline="never">
        Underline never
      </Anchor>
    </Group>
  );
}

With Button Variant

Anchor with button variant

import { Anchor } from "@/ui/anchor";

function AnchorButtonVariantDemo() {
  return <Anchor className={buttonStyle({ size: "default", variant: "primitive" })}>Anchor with button variant</Anchor>;
}

Properties

Interactive configurator to explore customization options for the Anchor component.

Anchor component

Underline

Role

Styles

Tailwind utilities

Add the following utilities css to your tailwind.config.js file:

import { PluginAPI, type Config } from "tailwindcss/types/config";
import plugin from "tailwindcss/plugin";
 
export default {
  theme: {
    extend: {}
  },
  plugins: [
    require("tailwindcss-animate"),
    plugin(({ addBase, addUtilities }: PluginAPI) => {
      addBase({});
      addUtilities({
        ".underline-hover": {
          position: "relative",
          touchAction: "manipulation",
          "&::after": {
            content: '""',
            position: "absolute",
            bottom: "var(--underline-offset, 2px)",
            backgroundColor: "currentColor",
            height: "1px"
          },
          "@media (hover: hover)": {
            "&::after": {
              left: "0",
              width: "100%",
              transform: "scaleX(0)",
              transformOrigin: "right center",
              transition: "transform .45s cubic-bezier(0.86, 0, 0.07, 1)"
            },
            "&:hover": {
              "&::after": {
                transform: "scaleX(1)",
                transformOrigin: "left center",
                animation: "none"
              }
            }
          },
          "@media not all and (hover: hover)": {
            "&::after": {
              width: "0"
            },
            "&:hover": {
              "&::after": {
                animation: "underlinehover 0.75s cubic-bezier(0.86, 0, 0.07, 1)"
              }
            }
          }
        }
      });
    })
  ]
} satisfies Config;

Globals CSS

Remember to add keyframes styles to your globals.css file.

API References

mdn

Styles API

Styles API	Type	Default	Annotation
unstyled`?`	`boolean`	`false`	if `true`, all default styles will be removed
underline`?`	`"always" \| "hover" \| "never"`	`never`
role`?`	`"anchor" \| AriaRole`	`undefined`	if `role="anchor"`, add blue color style

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

Anchor

Anchor

anchor.tsx

globals.css