Photonix UI - React Components, Templates & Figma Design System

Image

Enhanced image component with fixed aspect ratios and consistent styling.

Preview

Usage

"use client";

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

export default function ImageBasicExample() {
    return (
        <Box w={360} maxW="100%">
            <Image
                src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80"
                alt="Modern workspace"
                aspectRatio="16:9"
                objectFit="cover"
            />
        </Box>
    );
}

Component API

Image

Prop	Type	Default	Description
src	`string`	`-`	Image source URL
alt	`string`	`-`	Alternative text for accessibility
aspectRatio	`AspectRatio`	`'1:1'`	Fixed aspect ratio for the image
objectFit	`"cover" \| "contain"`	`'cover'`	How the image should be resized to fit its container
className	`string`	`-`	Additional CSS class
style	`React.CSSProperties`	`-`	Additional inline styles

Variants

Aspect Ratios

The component supports a comprehensive set of aspect ratios for landscape, portrait, and panoramic images.

Landscape & Panoramic

16:9

21:9

4:3

Portrait & Vertical

3:4

2:3

9:16

Square

Aspect Ratios

"use client";

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

export default function ImageRatiosExample() {
    return (
        <Box display="flex" flexDirection="column" gap="xl" w="100%">
            <Box>
                <Text variant="label-lg" style={{ marginBottom: '12px', display: 'block' }}>Landscape & Panoramic</Text>
                <Box style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
                    <Box>
                        <Text variant="body-sm" color="secondary" style={{ marginBottom: '8px', display: 'block' }}>16:9</Text>
                        <Image src="/card_architecture.png" alt="16:9" aspectRatio="16:9" style={{ borderRadius: '8px' }} />
                    </Box>
                    <Box>
                        <Text variant="body-sm" color="secondary" style={{ marginBottom: '8px', display: 'block' }}>21:9</Text>
                        <Image src="/card_architecture.png" alt="21:9" aspectRatio="21:9" style={{ borderRadius: '8px' }} />
                    </Box>
                    <Box>
                        <Text variant="body-sm" color="secondary" style={{ marginBottom: '8px', display: 'block' }}>4:3</Text>
                        <Image src="/card_architecture.png" alt="4:3" aspectRatio="4:3" style={{ borderRadius: '8px' }} />
                    </Box>
                </Box>
            </Box>

            <Box>
                <Text variant="label-lg" style={{ marginBottom: '12px', display: 'block' }}>Portrait & Vertical</Text>
                <Box style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
                    <Box>
                        <Text variant="body-sm" color="secondary" style={{ marginBottom: '8px', display: 'block' }}>3:4</Text>
                        <Image src="/image_portrait.png" alt="3:4" aspectRatio="3:4" style={{ borderRadius: '8px' }} />
                    </Box>
                    <Box>
                        <Text variant="body-sm" color="secondary" style={{ marginBottom: '8px', display: 'block' }}>2:3</Text>
                        <Image src="/image_portrait.png" alt="2:3" aspectRatio="2:3" style={{ borderRadius: '8px' }} />
                    </Box>
                    <Box>
                        <Text variant="body-sm" color="secondary" style={{ marginBottom: '8px', display: 'block' }}>9:16</Text>
                        <Image src="/image_portrait.png" alt="9:16" aspectRatio="9:16" style={{ borderRadius: '8px' }} />
                    </Box>
                </Box>
            </Box>

            <Box>
                <Text variant="label-lg" style={{ marginBottom: '12px', display: 'block' }}>Square</Text>
                <Box w={180} maxW="100%">
                    <Image src="/card_architecture.png" alt="1:1" aspectRatio="1:1" style={{ borderRadius: '8px' }} />
                </Box>
            </Box>
        </Box>
    );
}

Object Fit

Control how the image is resized to fit its container using the objectFit prop.

Cover

Contain

Object Fit

"use client";

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

export default function ImageObjectFitExample() {
    return (
        <Box style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px', width: '100%' }}>
            <Box>
                <Text variant="label-lg" style={{ marginBottom: '12px', display: 'block' }}>Cover</Text>
                <Box style={{ border: '1px solid var(--border-neutral-secondary)', padding: '4px', borderRadius: '12px' }}>
                    <Image src="/card_architecture.png" alt="Cover" aspectRatio="16:9" objectFit="cover" style={{ borderRadius: '8px' }} />
                </Box>
            </Box>
            <Box>
                <Text variant="label-lg" style={{ marginBottom: '12px', display: 'block' }}>Contain</Text>
                <Box style={{ border: '1px solid var(--border-neutral-secondary)', padding: '4px', borderRadius: '12px' }}>
                    <Image src="/card_architecture.png" alt="Contain" aspectRatio="16:9" objectFit="contain" style={{ borderRadius: '8px', background: 'var(--surface-neutral-secondary)' }} />
                </Box>
            </Box>
        </Box>
    );
}

Image

Preview

Component API

Image

Variants

Aspect Ratios

Object Fit

On this page