Components
CrystalLinkUnderline
Animated underline link with configurable color, thickness, and direction.
CrystalLinkUnderline adds an animated underline effect to anchor links using pure CSS transitions. The underline slides in on hover from a configurable direction. Extends native <a> element props.
Import
import { CrystalLinkUnderline } from '@artasce/crystal-ui';Usage
<CrystalLinkUnderline href="/about">
About Me
</CrystalLinkUnderline>Props
CrystalLinkUnderline Props
| Token | Variable | Value |
|---|---|---|
children | React.ReactNode | (required) |
color | 'default' | 'cool' | 'warm' | 'amethyst' | 'cool' |
thickness | 'thin' | 'medium' | 'thick' | 'thin' |
direction | 'left' | 'right' | 'center' | 'left' |
href | string | — |
className | string | — |
Values update live with theme changes. Click any row to copy the CSS variable.
All standard <a> HTML attributes are also supported (target, rel, etc.).
Examples
Color Variants
<CrystalLinkUnderline href="#" color="default">Default (white)</CrystalLinkUnderline>
<CrystalLinkUnderline href="#" color="cool">Cool (blue)</CrystalLinkUnderline>
<CrystalLinkUnderline href="#" color="warm">Warm (orange)</CrystalLinkUnderline>
<CrystalLinkUnderline href="#" color="amethyst">Amethyst (purple)</CrystalLinkUnderline>Direction Variants
<CrystalLinkUnderline href="#" direction="left">From Left</CrystalLinkUnderline>
<CrystalLinkUnderline href="#" direction="right">From Right</CrystalLinkUnderline>
<CrystalLinkUnderline href="#" direction="center">From Center</CrystalLinkUnderline>Navigation Pattern
<nav className="flex gap-6">
<CrystalLinkUnderline href="/" color="cool" thickness="medium">Home</CrystalLinkUnderline>
<CrystalLinkUnderline href="/work" color="cool" thickness="medium">Work</CrystalLinkUnderline>
<CrystalLinkUnderline href="/about" color="cool" thickness="medium">About</CrystalLinkUnderline>
</nav>How It Works
Uses a CSS ::before pseudo-element that transitions from width: 0 to width: 100% on hover, with transform-origin controlling the direction.