How do I link the card to a product page?

Pass href. On devices with a mouse, clicking anywhere on the card opens it in a new tab. On touch screens a tap toggles the overlay instead, and the link is not opened.

Does it add product structured data?

Yes, a Product JSON-LD script with name, description, image and url. price becomes an Offer with priceCurrency USD, EUR, GBP, TRY or JPY when it starts with the matching symbol; other currencies are left out.

How do I use my own overlay color?

Set theme="custom" and customOverlayColor to a hex color; overlayOpacity sets the strength at the bottom of the gradient.

How does it work on phones?

It detects touch devices with the (hover: none) and (pointer: coarse) media query, and a tap shows or hides the details.

React Eternal Glow Card Component: Free, Tailwind & shadcn/ui

About the Eternal Glow Card component

Eternal Glow Card is a free product card that shows a full-bleed photo with a small badge, then on hover blurs the image behind a tinted gradient and brings in the title, price, description and a button one after another. The image zooms slightly while the card is active.

theme picks the tint ("dark", "warm", "navy", "rose" or "custom" with customOverlayColor), with overlayOpacity (0 to 100, default 55) and blurAmount (default 12px) controlling the overlay. badgeText, badgePosition, buttonText, titleSize and the showBadge, showPrice and showDescription switches are props. It emits schema.org Product JSON-LD with the title, description, image and href, plus an Offer when price starts with $, €, £, ₺ or ¥; the markup is skipped while the placeholder title is shown.

When to use it

Use it for featured products on a skincare, beauty, fashion or homeware store, collection landing pages and single-product promo tiles where the photo should lead and details appear on hover.

For a full product grid with filters, use Product List.

Installation

Add the Eternal Glow Card component to your project with the shadcn CLI. It lands in components/eternal-glow-card.tsx as plain React + Tailwind CSS source you own and can edit.

Install

Copied!

npx shadcn@latest add @reactframe/eternal-glow-card

Or copy the source by hand and install its dependencies:

Install

Copied!

npm install clsx tailwind-merge

Props

<EternalGlowCard /> accepts 17 props, all optional.

Prop	Type	Default
image	string	"https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=800"
title	string	"Eternal Glow"
titleSize	number	36
description	string	"Unveil your natural radiance with our vitamin-rich serums designed to hydrate and illumi…
showDescription	boolean	true
price	string	"$48.00"
showPrice	boolean	true
buttonText	string	"Shop the Glow"
href	string	—
showBadge	boolean	true
badgeText	string	"New"
badgePosition	"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"	"top-right"

image
string
Default: "https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=800"
title
string
Default: "Eternal Glow"
titleSize
number
Default: 36
description
string
Default: "Unveil your natural radiance with our vitamin-rich serums designed to hydrate and illumi…
showDescription
boolean
Default: true
price
string
Default: "$48.00"
showPrice
boolean
Default: true
buttonText
string
Default: "Shop the Glow"
href
string
showBadge
boolean
Default: true
badgeText
string
Default: "New"
badgePosition
"top-left" | "top-right" | "bottom-left" | "bottom-right"
Default: "top-right"

Show all 17 props

theme	"dark" \| "warm" \| "navy" \| "rose" \| "custom"	"dark"
customOverlayColor	string	"#000000"
overlayOpacity	number	55
blurAmount	number	12
className	string	—

theme
"dark" | "warm" | "navy" | "rose" | "custom"
Default: "dark"
customOverlayColor
string
Default: "#000000"
overlayOpacity
number
Default: 55
blurAmount
number
Default: 12
className
string

npm dependencies

Installed for you by the shadcn CLI.

Eternal Glow Card FAQ

How do I link the card to a product page?: Pass href. On devices with a mouse, clicking anywhere on the card opens it in a new tab. On touch screens a tap toggles the overlay instead, and the link is not opened.
Does it add product structured data?: Yes, a Product JSON-LD script with name, description, image and url. price becomes an Offer with priceCurrency USD, EUR, GBP, TRY or JPY when it starts with the matching symbol; other currencies are left out.
How do I use my own overlay color?: Set theme="custom" and customOverlayColor to a hex color; overlayOpacity sets the strength at the bottom of the gradient.
How does it work on phones?: It detects touch devices with the (hover: none) and (pointer: coarse) media query, and a tap shows or hides the details.

Eternal Glow Card React component