Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Components
Anchor
Units Converters

Comprehensive set of functions for size manipulation.

Avatar

A customizable component for displaying user avatars, ideal for profiles and social media integration.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

Anchor

A basic component used to create navigational links or anchors within the page, often used for internal linking.

Usage

Basic usage example to quickly see how the Anchor works.

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

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

Decoration

Underline alwaysUnderline hoverUnderline 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
import { Anchor } from "@/ui/anchor";

export function AnchorDemo() {
  return (
    <Anchor>
      Anchor component
    </Anchor>
  );
}

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 APITypeDefaultAnnotation
unstyled?booleanfalseif true, all default styles will be removed
underline?"always" | "hover" | "never"never
role?"anchor" | AriaRoleundefinedif 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.tsx
globals.css
/* anchor */ @keyframes underlinehover { 0% { left: 0; width: 0; } 50% { width: 100%; } 100% { right: 0; width: 0; } }