Hero Highlight

text

Dynamic gradient highlight container for landing page titles.

#text#highlight#hero#gradient

Live Interactive Preview

Build delightful web products with Aurenza Spatial UI

Copy-paste production grade interactive components designed for maximum visual appeal.

Component Source Code

Select language in the dropdown

HeroHighlight.tsx

1'use client';
2
3import React from 'react';
4
5export default function HeroHighlight() {
6  return (
7    <div className="flex flex-col items-center justify-center p-6 text-center max-w-xl">
8      <h1 className="text-2xl sm:text-4xl font-extrabold leading-snug text-slate-900 dark:text-white">
9        Build delightful web products with{' '}
10        <span className="relative inline-block px-2 py-0.5 text-blue-900 dark:text-cyan-100 font-black">
11          <span className="absolute inset-0 -skew-y-2 rounded-lg bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 opacity-80 -z-10" />
12          Aurenza Spatial UI
13        </span>
14      </h1>
15      <p className="mt-3 text-xs sm:text-sm text-slate-600 dark:text-slate-400">
16        Copy-paste production grade interactive components designed for maximum visual appeal.
17      </p>
18    </div>
19  );
20}

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/HeroHighlight.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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