Typographytypographylinknavigation
Smart Underline Link
A link with a smooth underline animation that expands from the center.
Live Preview
Usage
Copy and paste this code into your React component:
tsx
import { AnimatedUnderlineLink } from 'react-component-kit-ui/typography';
<AnimatedUnderlineLink href="#">Content</AnimatedUnderlineLink>Manual Installation
If you are not using the npm package, create a new file and paste the following code: src/components/AnimatedUnderlineLink.tsx + AnimatedUnderlineLink.css:
AnimatedUnderlineLink.tsx
'use client';
import type { ReactNode } from 'react';
import './AnimatedUnderlineLink.css';
/** AnimatedUnderlineLink โ ported from astro-component-kit. */
export interface AnimatedUnderlineLinkProps {
href: string;
children?: ReactNode;
}
export function AnimatedUnderlineLink({ href,
children
}: AnimatedUnderlineLinkProps) {
return (
<>
<a href={href} className="smart-link" data-rk-8961c9="">{children}</a>
</>
);
}
export default AnimatedUnderlineLink;AnimatedUnderlineLink.css
/* AnimatedUnderlineLink โ ported from astro-component-kit (typography/AnimatedUnderlineLink.astro) */
.smart-link:where([data-rk-8961c9]) { color: #818cf8; text-decoration: none; position: relative; font-weight: 600; padding: 2px 0; }
.smart-link:where([data-rk-8961c9])::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: #6366f1; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.smart-link:hover:where([data-rk-8961c9])::after { width: 100%; left: 0; }Quick Info
- Category
- Typography
- Filename
AnimatedUnderlineLink.tsx- Dependencies
- None โ pure React + CSS
- Tags
- typographylinknavigation