Squiggly Text

text

SVG hand-drawn wave underline highlight animation.

#text#squiggly#underline#handdrawn

Live Interactive Preview

Handcrafted with Passion

Component Source Code

Select language in the dropdown

SquigglyText.tsx

1'use client';
2
3import React from 'react';
4
5export default function SquigglyText() {
6  return (
7    <div className="flex flex-col items-center justify-center p-6 text-center">
8      <h2 className="relative inline-block text-2xl sm:text-4xl font-extrabold text-slate-900 dark:text-white">
9        <span>Handcrafted with Passion</span>
10        <svg
11          className="absolute -bottom-2.5 left-0 w-full h-3 text-cyan-500 fill-none stroke-current"
12          viewBox="0 0 100 10"
13          preserveAspectRatio="none"
14        >
15          <path
16            d="M 0 5 Q 12.5 0 25 5 T 50 5 T 75 5 T 100 5"
17            strokeWidth="3"
18            strokeLinecap="round"
19          />
20        </svg>
21      </h2>
22    </div>
23  );
24}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/text/SquigglyText.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import SquigglyText from '@/components/text/SquigglyText';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <SquigglyText />
7    </main>
8  );
9}