Animated Underline
Text that animates on hover or focus
- Animates text on hover or focus
- Multi-line support
Installation
Run the following command
npx vibes@latest add animated-underlineUsage
import { AnimatedUnderline } from '@/vibes/soul/primitives/animated-underline';export function Usage() { return ( <p>Check out this <AnimatedUnderline>animated text!</AnimatedUnderline></p> );}Usage with buttons and links
The AnimatedUnderline component can be used with other components, like the Next.js Link component or a button element, to create a focus-based underline animation. To do this, you need to pass the className prop to the wrapping component and apply the group/underline and focus:outline-hidden classes to it.
import Link from 'next/link';import { AnimatedUnderline } from '@/vibes/soul/primitives/animated-underline';export function Usage() { return ( <Link className="group/underline focus:outline-hidden" href="/about"><AnimatedUnderline>About</AnimatedUnderline></Link> );}API Reference
AnimatedUnderlineProps
| Prop | Type | Default |
|---|---|---|
children | string | |
className | string |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --animated-underline-hover: var(--primary); --animated-underline-text: var(--foreground); --animated-underline-font-family: var(--font-family-body);}