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

Jane Cooper

@jane

2.4k

18k

Today

Usage

"use client";

import { Box, GalleryCard } from '@photonix/ultimate';

export default function GalleryCardBasicExample() {
    return (
        <Box w={320} maxW="100%">
            <GalleryCard
                src="https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=900&q=80"
                alt="Abstract architecture"
                authorName="Jane Cooper"
                authorHandle="@jane"
                likes="2.4k"
                views="18k"
                timeAgo="Today"
                actionLabel="Use idea"
            />
        </Box>
    );
}

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.

Jane Cooper

@jane

2.4k

18k

Today

Basic Usage

"use client";

import { Box, GalleryCard } from '@photonix/ultimate';

export default function GalleryCardBasicExample() {
    return (
        <Box w={320} maxW="100%">
            <GalleryCard
                src="https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=900&q=80"
                alt="Abstract architecture"
                authorName="Jane Cooper"
                authorHandle="@jane"
                likes="2.4k"
                views="18k"
                timeAgo="Today"
                actionLabel="Use idea"
            />
        </Box>
    );
}

Grid Layout

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

Jane Cooper

@jane

Wade Warren

@wade

302

Grid Layout

"use client";

import { GalleryCard, SimpleGrid } from '@photonix/ultimate';

export default function GalleryCardGridExample() {
    return (
        <SimpleGrid columns={2} gap="md" style={{ width: '100%' }}>
            <GalleryCard
                style={{ height: '300px' }}
                src="https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=900&q=80"
                alt="Abstract architecture"
                authorName="Jane Cooper"
                authorHandle="@jane"
            />
            <GalleryCard
                style={{ height: '300px' }}
                src="https://images.unsplash.com/photo-1460661419201-fd4cecdf8a8b?auto=format&fit=crop&w=900&q=80"
                alt="Studio desk"
                authorName="Wade Warren"
                authorHandle="@wade"
                likes={302}
            />
        </SimpleGrid>
    );
}

GalleryCard

Preview

Component API

GalleryCard

Variants

Basic Usage

Grid Layout

On this page