<h1>AnnotatedLink Component</h1>
One of the subtle yet captivating features you might notice while browsing <a href="https://fedilayoub.com" target="_blank" rel="noopener nofollow">fedilayoub.com</a> is the playful animation that appears when you hover over the navigation links. These hand-drawn annotations add a touch of personality and interactivity to the website, making the navigation experience more engaging and memorable.
In this guide, I’ll show you how to create and implement this exact animated link component that I built using react-rough-notation for Next.js applications. Whether you’re building a portfolio, a blog, or any web application, this component can add that extra layer of polish and interactivity to your links.
<a href="https://fedilayoub.com" target="_blank" rel="noopener nofollow">Demo of AnnotatedLink component on fedilayoub.com</a>
<h2>Features</h2>
<ul>
<li>🎨 Beautiful hand-drawn animations on hover</li>
<li>📱 Fully responsive and mobile-friendly</li>
<li>🎯 Active link state handling</li>
<li>🎪 Multiple annotation styles (underline, box, circle, etc.)</li>
<li>🎭 Customizable colors and animation properties</li>
<li>📦 Easy to integrate with Next.js and Tailwind CSS</li>
<li>💪 Written in TypeScript for better development experience</li>
</ul>
A beautiful animated link component built with react-rough-notation for Next.js applications. Add playful, hand-drawn annotations to your links that appear on hover.
<h2>Installation</h2>
Install the following dependencies:
<pre><code class="language-bash">npm install react-rough-notation clsx tailwind-merge
</code></pre>
<h2>Creating the utility function</h2>
First, create a <code>lib</code> folder in your project root if it doesn’t exist, then create a <code>utils.ts</code> file inside it with the following code:
<pre><code class="language-typescript">import { type ClassValue, clsx } from &quot;clsx&quot;
import { twMerge } from &quot;tailwind-merge&quot;

export function cn(...inputs: ClassValue[]) {
 return twMerge(clsx(inputs))
}
</code></pre>
<h2>Component Implementation</h2>
Create a new file called <code>annotated-link.tsx</code> in your components directory:
<pre><code class="language-typescript">&#x27;use client&#x27;
import { RoughNotation } from &#x27;react-rough-notation&#x27;;
import Link from &#x27;next/link&#x27;;
import { useState } from &#x27;react&#x27;;
import { usePathname } from &#x27;next/navigation&#x27;;
import { cn } from &quot;@/lib/utils&quot;;

type AnnotationType = 
 | &quot;underline&quot;
 | &quot;box&quot;
 | &quot;circle&quot;
 | &quot;highlight&quot;
 | &quot;strike-through&quot;
 | &quot;crossed-off&quot;
 | &quot;bracket&quot;;

interface AnnotatedLinkProps {
 text?: string;
 href: string;
 type?: AnnotationType;
 className?: string;
 activeClassName?: string;
 inactiveClassName?: string;
 color?: string;
 strokeWidth?: number;
 animate?: boolean;
 iterations?: number;
 padding?: number;
 children?: React.ReactNode;
}

const AnnotatedLink: React.FC&lt;AnnotatedLinkProps&gt; = ({ 
 text, 
 href, 
 type = &quot;underline&quot;,
 className,
 activeClassName = &quot;text-accent-lighter underline underline-offset-4 decoration-2&quot;,
 inactiveClassName = &quot;text-white&quot;,
 color = &quot;#9E86BA&quot;,
 strokeWidth = 2,
 animate = true,
 iterations = 2,
 padding = 2,
 children
}) =&gt; {
 const [isAnnotationVisible, setAnnotationVisible] = useState&lt;boolean&gt;(false);
 const path = usePathname();
 const isActiveLink = path?.includes(text?.toLowerCase() ?? &#x27;&#x27;);
 
 const handleMouseEnter = (): void =&gt; {
 setAnnotationVisible(true);
 };

 const handleMouseLeave = (): void =&gt; {
 setAnnotationVisible(false);
 };

 return (
 &lt;RoughNotation
 type={type}
 strokeWidth={strokeWidth}
 show={isAnnotationVisible}
 color={color}
 animate={animate}
 iterations={iterations}
 padding={padding}
 &gt;
 &lt;Link
 className={cn(
 className,
 isActiveLink ? activeClassName : inactativeClassName
 )}
 href={href}
 onMouseEnter={handleMouseEnter}
 onMouseLeave={handleMouseLeave}
 &gt;
 {children || text}
 &lt;/Link&gt;
 &lt;/RoughNotation&gt;
 );
};

export default AnnotatedLink;
</code></pre>
<h2>Examples</h2>
<h3>Basic Usage</h3>
<pre><code class="language-tsx">import { AnnotatedLink } from &quot;@/components/ui/annotated-link&quot;

export default function Navigation() {
 return (
 &lt;nav className=&quot;flex gap-4&quot;&gt;
 &lt;AnnotatedLink href=&quot;/about&quot; text=&quot;About&quot; /&gt;
 &lt;AnnotatedLink href=&quot;/projects&quot; text=&quot;Projects&quot; /&gt;
 &lt;AnnotatedLink href=&quot;/contact&quot; text=&quot;Contact&quot; /&gt;
 &lt;/nav&gt;
 )
}
</code></pre>
<h3>Custom Styling</h3>
<pre><code class="language-tsx">&lt;AnnotatedLink 
 href=&quot;/projects&quot;
 text=&quot;View Projects&quot;
 type=&quot;box&quot;
 color=&quot;#FF5733&quot;
 className=&quot;font-bold hover:text-blue-500&quot;
 activeClassName=&quot;text-blue-600 font-semibold&quot;
 inactiveClassName=&quot;text-gray-800&quot;
 strokeWidth={3}
 iterations={3}
/&gt;
</code></pre>
<h3>With Custom Content</h3>
<pre><code class="language-tsx">&lt;AnnotatedLink href=&quot;/github&quot; type=&quot;circle&quot; color=&quot;#333&quot;&gt;
 &lt;div className=&quot;flex items-center gap-2&quot;&gt;
 &lt;GithubIcon className=&quot;w-5 h-5&quot; /&gt;
 &lt;span&gt;Follow me on GitHub&lt;/span&gt;
 &lt;/div&gt;
&lt;/AnnotatedLink&gt;
</code></pre>
<h2>Component Reference</h2>
<h3>Props</h3>
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>text</code></td>
<td><code>string</code></td>
<td>-</td>
<td>Optional text content of the link</td>
</tr>
<tr>
<td><code>href</code></td>
<td><code>string</code></td>
<td><code>Required</code></td>
<td>Link destination</td>
</tr>
<tr>
<td><code>type</code></td>
<td><code>AnnotationType</code></td>
<td><code>&quot;underline&quot;</code></td>
<td>Type of annotation effect</td>
</tr>
<tr>
<td><code>className</code></td>
<td><code>string</code></td>
<td>-</td>
<td>Additional classes for the link</td>
</tr>
<tr>
<td><code>activeClassName</code></td>
<td><code>string</code></td>
<td><code>&quot;text-accent-lighter underline...&quot;</code></td>
<td>Classes for active state</td>
</tr>
<tr>
<td><code>inactiveClassName</code></td>
<td><code>string</code></td>
<td><code>&quot;text-white&quot;</code></td>
<td>Classes for inactive state</td>
</tr>
<tr>
<td><code>color</code></td>
<td><code>string</code></td>
<td><code>&quot;#9E86BA&quot;</code></td>
<td>Color of the annotation</td>
</tr>
<tr>
<td><code>strokeWidth</code></td>
<td><code>number</code></td>
<td><code>2</code></td>
<td>Width of the annotation stroke</td>
</tr>
<tr>
<td><code>animate</code></td>
<td><code>boolean</code></td>
<td><code>true</code></td>
<td>Whether to animate the annotation</td>
</tr>
<tr>
<td><code>iterations</code></td>
<td><code>number</code></td>
<td><code>2</code></td>
<td>Number of animation iterations</td>
</tr>
<tr>
<td><code>padding</code></td>
<td><code>number</code></td>
<td><code>2</code></td>
<td>Padding around the annotation</td>
</tr>
<tr>
<td><code>children</code></td>
<td><code>ReactNode</code></td>
<td>-</td>
<td>Optional child elements</td>
</tr>
</tbody>
</table>
<h3>Annotation Types</h3>
The component supports these annotation types:
<ul>
<li><code>&quot;underline&quot;</code> - Simple underline effect</li>
<li><code>&quot;box&quot;</code> - Box around the text</li>
<li><code>&quot;circle&quot;</code> - Circle around the text</li>
<li><code>&quot;highlight&quot;</code> - Highlight effect</li>
<li><code>&quot;strike-through&quot;</code> - Strike-through effect</li>
<li><code>&quot;crossed-off&quot;</code> - Crossed-off effect</li>
<li><code>&quot;bracket&quot;</code> - Bracket around the text</li>
</ul>
<h2>Styling Guide</h2>
<h3>Customizing Default Styles</h3>
You can modify the default active and inactive styles by passing custom class names:
<pre><code class="language-tsx">&lt;AnnotatedLink
 href=&quot;/contact&quot;
 text=&quot;Contact&quot;
 activeClassName=&quot;text-primary font-bold underline-offset-8&quot;
 inactiveClassName=&quot;text-gray-600 hover:text-gray-900&quot;
/&gt;
</code></pre>
<h3>Responsive Design</h3>
<pre><code class="language-tsx">&lt;AnnotatedLink
 href=&quot;/projects&quot;
 text=&quot;Projects&quot;
 className=&quot;text-sm md:text-base lg:text-lg&quot;
 padding={4}
/&gt;
</code></pre>
<h3>Dark Mode Support</h3>
<pre><code class="language-tsx">&lt;AnnotatedLink
 href=&quot;/about&quot;
 text=&quot;About&quot;
 className=&quot;dark:text-gray-300 dark:hover:text-white&quot;
 color=&quot;var(--annotation-color)&quot;
/&gt;
</code></pre>
<h2>Best Practices</h2>
<ol>
<li>
Accessibility: The component inherits Next.js Link’s accessibility features. Ensure your text and color combinations maintain sufficient contrast.
</li>
<li>
Performance: The animation is triggered only on hover, minimizing unnecessary redraws.
</li>
<li>
Responsive Design: Use Tailwind’s responsive classes to adjust the component’s appearance across different screen sizes.
</li>
<li>
Dynamic Colors: You can bind the annotation color to CSS variables for dynamic theming:
</li>
</ol>
<pre><code class="language-tsx">&lt;AnnotatedLink
 href=&quot;/contact&quot;
 text=&quot;Contact&quot;
 color=&quot;var(--primary-color)&quot;
/&gt;
</code></pre>
<h2>License</h2>
MIT License
Feel free to use this component in your projects and customize it to your needs!
#nextjs #typescript #webdev #ui #tutorial #react #portfolio #tailwind #react #shadcn

An independent Squad for discussions, questions and answers about Next.JS. 


NextJS

Learn how to create an animated link component using react-rough-notation in Next.js. This guide covers the implementation details, including installing necessary dependencies, creating utility functions, and applying customizable animation styles. It also demonstrates various use cases such as customizing styles, supporting responsive design, and enhancing accessibility.

Building an Animated Link Component with react-rough-notation in Next.js

This animated link component adds personality and interactivity to navigation by combining hand-drawn hover effects with smooth transitions. Using <a href="https://www.bardui.com/tailwind-colors" target="_blank" rel="noopener nofollow">Tailwind text colors</a>, you can easily control default, hover, and active states to reinforce visual feedback while keeping the component consistent with your overall design system in a Next.js app.
The complete Tailwind CSS color reference. Instantly copy Hex, RGB, HSL, and OKLCH codes for Tailwind v4 and v3. The modern, responsive color picker for developers.

Wonderful Open Source component here. Could get really creative with some splines here ;-)
It’s so refreshing to see people still building rather than just importing shadcn ^_^