Photonix

GalleryCard

A premium image card with an interactive hover overlay, designed for prompt galleries and media showcases.

Preview

Usage
import { GalleryCard } from '@photonix/ultimate';

Component API

GalleryCard

Prop
Type
Default
Description
src
string
-
Image URL
alt
string
-
Alt text for the image
authorName
string
-
Author display name
authorHandle
string
-
Author handle (e.g.
authorAvatar
string
-
Author avatar URL
likes
string | number
-
Like/favorite count
views
string | number
-
View count
timeAgo
string
-
Time ago label
actionLabel
string
'Use Idea'
Primary action label
onAction
(() => void)
-
Callback when primary action is clicked
onCopy
(() => void)
-
Callback when "Copy" is clicked
onShare
(() => void)
-
Callback when "Share" is clicked

Variants

Basic Usage

The default gallery card with author info, stats, and actions. Hover over the card to see the overlay.

Basic Usage
<GalleryCard
    src="https://images.meigen.ai/cdn-cgi/image/format=auto,quality=85/tweets/2052635450444251615/0.jpg"
    authorName="shah_zadii"
    authorHandle="@sha_zdiii"
    likes={156}
    views="3.7K"
    timeAgo="1d ago"
    onAction={() => alert('Use Idea clicked!')}
    onCopy={() => alert('Copied!')}
    onShare={() => alert('Shared!')}
/>

Grid Layout

GalleryCards are designed to look great in grids and masonry layouts.

Grid Layout
<SimpleGrid columns={2} gap="md">
    <GalleryCard
        src="https://images.meigen.ai/cdn-cgi/image/format=auto,quality=85/tweets/2052635450444251615/0.jpg"
        authorName="shah_zadii"
        authorHandle="@sha_zdiii"
    />
    <GalleryCard
        src="https://images.meigen.ai/cdn-cgi/image/format=auto,quality=85/tweets/2054144847787799020/0.jpg"
        authorName="artflow_ai"
        authorHandle="@artflow"
        likes={302}
    />
</SimpleGrid>

On this page

Preview
Component API
Variants
Basic Usage
Grid Layout
Photonix UI - React Components, Templates & Figma Design System