Photonix UI - React Components, Templates & Figma Design System

GalleryCard

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

Preview

shah_zadii

@sha_zdiii

156

3.7K

1d ago

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.

shah_zadii

@sha_zdiii

156

3.7K

1d ago

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.

shah_zadii

@sha_zdiii

artflow_ai

@artflow

302

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>

GalleryCard

Preview

Component API

GalleryCard

Variants

Basic Usage

Grid Layout

On this page