Photonix UI - React Components, Templates & Figma Design System

Flex

A layout container using CSS Flexbox.

Preview

Leading item

Item 2

Item 3

Usage

"use client";

import { Flex } from '@photonix/ultimate';

import { LayoutPreviewCanvas, LayoutPreviewItem } from '../_shared/LayoutPreview';

export default function FlexBasicExample() {
    return (
        <LayoutPreviewCanvas>
            <Flex gap="sm" align="center" justify="between" wrap>
                <LayoutPreviewItem label="Leading item" minW={140} />
                <Flex gap="xs" wrap>
                    <LayoutPreviewItem label="Item 2" />
                    <LayoutPreviewItem label="Item 3" />
                </Flex>
            </Flex>
        </LayoutPreviewCanvas>
    );
}

Component API

Flex

Prop	Type	Default	Description
direction	`ResponsiveValue<FlexDirection>`	`'row'`	Flex direction
gap	`ResponsiveValue<SpacingToken>`	`-`	Gap between children using spacing tokens
columnGap	`ResponsiveValue<SpacingToken>`	`-`	Column Gap
rowGap	`ResponsiveValue<SpacingToken>`	`-`	Row Gap
align	`ResponsiveValue<AlignItems>`	`-`	Align items along the cross axis
justify	`ResponsiveValue<JustifyContent>`	`-`	Justify content along the main axis
wrap	`ResponsiveValue<boolean \| FlexWrap>`	`-`	Flex wrap behavior
basis	`ResponsiveValue<string \| number>`	`-`	Flex basis
grow	`ResponsiveValue<number>`	`-`	Flex grow
shrink	`ResponsiveValue<number>`	`-`	Flex shrink
alignContent	`ResponsiveValue<AlignContent>`	`-`	Align Content
alignSelf	`ResponsiveValue<AlignSelf>`	`-`	Align Self
order	`ResponsiveValue<number>`	`-`	Order
children	`React.ReactNode`	`-`	Children elements
p	`ResponsiveValue<SpacingToken>`	`-`	Padding on all sides
px	`ResponsiveValue<SpacingToken>`	`-`	Padding inline (left/right)
py	`ResponsiveValue<SpacingToken>`	`-`	Padding block (top/bottom)
pt	`ResponsiveValue<SpacingToken>`	`-`	Padding block start (top)
pb	`ResponsiveValue<SpacingToken>`	`-`	Padding block end (bottom)
pl	`ResponsiveValue<SpacingToken>`	`-`	Padding inline start (left)
pr	`ResponsiveValue<SpacingToken>`	`-`	Padding inline end (right)
m	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin on all sides
mx	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline (left/right)
my	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block (top/bottom)
mt	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block start (top)
mb	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block end (bottom)
ml	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline start (left)
mr	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline end (right)
display	`ResponsiveValue<DisplayValue>`	`-`	CSS display property
aspectRatio	`ResponsiveValue<string \| number>`	`-`	Aspect Ratio
flexDirection	`ResponsiveValue<FlexDirection>`	`-`	Flex direction
flexWrap	`ResponsiveValue<boolean \| FlexWrap>`	`-`	Flex wrap behavior
flex	`ResponsiveValue<string \| number>`	`-`	Shorthand for flex-grow, flex-shrink, flex-basis
flexGrow	`ResponsiveValue<number>`	`-`	Flex grow factor
flexShrink	`ResponsiveValue<number>`	`-`	Flex shrink factor
flexBasis	`ResponsiveValue<string \| number>`	`-`	Flex basis
alignItems	`ResponsiveValue<AlignItems>`	`-`	Align items (cross axis)
justifyContent	`ResponsiveValue<JustifyContent>`	`-`	Justify content (main axis)
justifyItems	`ResponsiveValue<string>`	`-`	Justify items (grid)
placeItems	`ResponsiveValue<string>`	`-`	Place items (align-items + justify-items)
placeContent	`ResponsiveValue<string>`	`-`	Place content (align-content + justify-content)
bg	`ResponsiveValue<BackgroundToken>`	`-`	Background color using public background tokens mapped to canonical surface vars
pageBg	`ResponsiveValue<PageBackgroundToken>`	`-`	Page background using canonical background-* vars for page/root containers
borderRadius	`ResponsiveValue<RadiusToken>`	`-`	Border radius using border-radius-* tokens
shadow	`ResponsiveValue<ShadowToken>`	`-`	Box shadow using shadow-* tokens
opacity	`ResponsiveValue<number>`	`-`	Opacity
border	`ResponsiveValue<string>`	`-`
borderWidth	`ResponsiveValue<number \| BorderWidthToken>`	`-`
borderStyle	`ResponsiveValue<string>`	`-`
borderColor	`ResponsiveValue<string>`	`-`
textAlign	`ResponsiveValue<TextAlign>`	`-`
fontSize	`ResponsiveValue<string \| number>`	`-`
fontWeight	`ResponsiveValue<string \| number>`	`-`
lineHeight	`ResponsiveValue<string \| number>`	`-`
color	`ResponsiveValue<string>`	`-`
w	`ResponsiveValue<string \| number>`	`-`	Width - accepts CSS value
h	`ResponsiveValue<string \| number>`	`-`	Height - accepts CSS value
minW	`ResponsiveValue<string \| number>`	`-`	Min width - accepts CSS value
minH	`ResponsiveValue<string \| number>`	`-`	Min height - accepts CSS value
maxW	`ResponsiveValue<string \| number>`	`-`	Max width - accepts CSS value
maxH	`ResponsiveValue<string \| number>`	`-`	Max height - accepts CSS value
position	`ResponsiveValue<Position>`	`-`	CSS position property
top	`ResponsiveValue<string \| number>`	`-`	Top position
right	`ResponsiveValue<string \| number>`	`-`	Right position
bottom	`ResponsiveValue<string \| number>`	`-`	Bottom position
left	`ResponsiveValue<string \| number>`	`-`	Left position
inset	`ResponsiveValue<string \| number>`	`-`	Inset shortcut
zIndex	`ResponsiveValue<number>`	`-`	Z-index
overflow	`ResponsiveValue<Overflow>`	`-`	CSS overflow property
overflowX	`ResponsiveValue<Overflow>`	`-`	CSS overflow-x property
overflowY	`ResponsiveValue<Overflow>`	`-`	CSS overflow-y property
cursor	`ResponsiveValue<string>`	`-`
pointerEvents	`ResponsiveValue<string>`	`-`
userSelect	`ResponsiveValue<string>`	`-`
transform	`ResponsiveValue<string>`	`-`
transition	`ResponsiveValue<string>`	`-`

Spacer

Prop	Type	Default	Description
className	`string`	`-`	Additional CSS class.

Center

Prop	Type	Default	Description
color	`ResponsiveValue<string>`	`-`
children	`React.ReactNode`	`-`	Children elements
p	`ResponsiveValue<SpacingToken>`	`-`	Padding on all sides
px	`ResponsiveValue<SpacingToken>`	`-`	Padding inline (left/right)
py	`ResponsiveValue<SpacingToken>`	`-`	Padding block (top/bottom)
pt	`ResponsiveValue<SpacingToken>`	`-`	Padding block start (top)
pb	`ResponsiveValue<SpacingToken>`	`-`	Padding block end (bottom)
pl	`ResponsiveValue<SpacingToken>`	`-`	Padding inline start (left)
pr	`ResponsiveValue<SpacingToken>`	`-`	Padding inline end (right)
m	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin on all sides
mx	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline (left/right)
my	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block (top/bottom)
mt	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block start (top)
mb	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block end (bottom)
ml	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline start (left)
mr	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline end (right)
display	`ResponsiveValue<DisplayValue>`	`-`	CSS display property
aspectRatio	`ResponsiveValue<string \| number>`	`-`	Aspect Ratio
flexDirection	`ResponsiveValue<FlexDirection>`	`-`	Flex direction
flexWrap	`ResponsiveValue<boolean \| FlexWrap>`	`-`	Flex wrap behavior
flex	`ResponsiveValue<string \| number>`	`-`	Shorthand for flex-grow, flex-shrink, flex-basis
flexGrow	`ResponsiveValue<number>`	`-`	Flex grow factor
flexShrink	`ResponsiveValue<number>`	`-`	Flex shrink factor
flexBasis	`ResponsiveValue<string \| number>`	`-`	Flex basis
order	`ResponsiveValue<number>`	`-`	Order
gap	`ResponsiveValue<SpacingToken>`	`-`	Gap between children using spacing tokens
columnGap	`ResponsiveValue<SpacingToken>`	`-`	Column Gap
rowGap	`ResponsiveValue<SpacingToken>`	`-`	Row Gap
alignItems	`ResponsiveValue<AlignItems>`	`-`	Align items (cross axis)
alignContent	`ResponsiveValue<AlignContent>`	`-`	Align Content
alignSelf	`ResponsiveValue<AlignSelf>`	`-`	Align Self
justifyContent	`ResponsiveValue<JustifyContent>`	`-`	Justify content (main axis)
justifyItems	`ResponsiveValue<string>`	`-`	Justify items (grid)
placeItems	`ResponsiveValue<string>`	`-`	Place items (align-items + justify-items)
placeContent	`ResponsiveValue<string>`	`-`	Place content (align-content + justify-content)
bg	`ResponsiveValue<BackgroundToken>`	`-`	Background color using public background tokens mapped to canonical surface vars
pageBg	`ResponsiveValue<PageBackgroundToken>`	`-`	Page background using canonical background-* vars for page/root containers
borderRadius	`ResponsiveValue<RadiusToken>`	`-`	Border radius using border-radius-* tokens
shadow	`ResponsiveValue<ShadowToken>`	`-`	Box shadow using shadow-* tokens
opacity	`ResponsiveValue<number>`	`-`	Opacity
border	`ResponsiveValue<string>`	`-`
borderWidth	`ResponsiveValue<number \| BorderWidthToken>`	`-`
borderStyle	`ResponsiveValue<string>`	`-`
borderColor	`ResponsiveValue<string>`	`-`
textAlign	`ResponsiveValue<TextAlign>`	`-`
fontSize	`ResponsiveValue<string \| number>`	`-`
fontWeight	`ResponsiveValue<string \| number>`	`-`
lineHeight	`ResponsiveValue<string \| number>`	`-`
w	`ResponsiveValue<string \| number>`	`-`	Width - accepts CSS value
h	`ResponsiveValue<string \| number>`	`-`	Height - accepts CSS value
minW	`ResponsiveValue<string \| number>`	`-`	Min width - accepts CSS value
minH	`ResponsiveValue<string \| number>`	`-`	Min height - accepts CSS value
maxW	`ResponsiveValue<string \| number>`	`-`	Max width - accepts CSS value
maxH	`ResponsiveValue<string \| number>`	`-`	Max height - accepts CSS value
position	`ResponsiveValue<Position>`	`-`	CSS position property
top	`ResponsiveValue<string \| number>`	`-`	Top position
right	`ResponsiveValue<string \| number>`	`-`	Right position
bottom	`ResponsiveValue<string \| number>`	`-`	Bottom position
left	`ResponsiveValue<string \| number>`	`-`	Left position
inset	`ResponsiveValue<string \| number>`	`-`	Inset shortcut
zIndex	`ResponsiveValue<number>`	`-`	Z-index
overflow	`ResponsiveValue<Overflow>`	`-`	CSS overflow property
overflowX	`ResponsiveValue<Overflow>`	`-`	CSS overflow-x property
overflowY	`ResponsiveValue<Overflow>`	`-`	CSS overflow-y property
cursor	`ResponsiveValue<string>`	`-`
pointerEvents	`ResponsiveValue<string>`	`-`
userSelect	`ResponsiveValue<string>`	`-`
transform	`ResponsiveValue<string>`	`-`
transition	`ResponsiveValue<string>`	`-`
wrap	`ResponsiveValue<boolean \| FlexWrap>`	`-`	Flex wrap behavior
direction	`ResponsiveValue<FlexDirection>`	`'row'`	Flex direction
basis	`ResponsiveValue<string \| number>`	`-`	Flex basis
grow	`ResponsiveValue<number>`	`-`	Flex grow
shrink	`ResponsiveValue<number>`	`-`	Flex shrink

Variants

Direction

Flex can be row (default) or column.

Row

Column

Direction

"use client";

import { Flex } from '@photonix/ultimate';

import { LayoutPreviewCanvas, LayoutPreviewItem, LayoutPreviewLabel } from '../_shared/LayoutPreview';

export default function FlexDirectionExample() {
    return (
        <Flex gap="xl" direction={{ base: 'column', md: 'row' }} w="100%">
            <Flex direction="column" gap="xs" flex={1}>
                <LayoutPreviewLabel>Row</LayoutPreviewLabel>
                <LayoutPreviewCanvas>
                    <Flex direction="row" gap="sm">
                        <LayoutPreviewItem label="1" minW={40} w={40} />
                        <LayoutPreviewItem label="2" minW={40} w={40} />
                    </Flex>
                </LayoutPreviewCanvas>
            </Flex>
            <Flex direction="column" gap="xs" flex={1}>
                <LayoutPreviewLabel>Column</LayoutPreviewLabel>
                <LayoutPreviewCanvas>
                    <Flex direction="column" gap="sm">
                        <LayoutPreviewItem label="1" minW={40} w={40} />
                        <LayoutPreviewItem label="2" minW={40} w={40} />
                    </Flex>
                </LayoutPreviewCanvas>
            </Flex>
        </Flex>
    );
}

Gap

Use tokens for standardized spacing.

Item 1

Item 2

Gap

"use client";

import { Flex } from '@photonix/ultimate';

import { LayoutPreviewCanvas, LayoutPreviewItem } from '../_shared/LayoutPreview';

export default function FlexGapExample() {
    return (
        <LayoutPreviewCanvas>
            <Flex gap="xl">
                <LayoutPreviewItem label="Item 1" />
                <LayoutPreviewItem label="Item 2" />
            </Flex>
        </LayoutPreviewCanvas>
    );
}

Alignment

Control align-items and justify-content.

Start

End

Alignment

"use client";

import { Flex } from '@photonix/ultimate';

import { LayoutPreviewCanvas, LayoutPreviewItem } from '../_shared/LayoutPreview';

export default function FlexAlignmentExample() {
    return (
        <LayoutPreviewCanvas>
            <Flex align="center" justify="between" w="100%">
                <LayoutPreviewItem label="Start" />
                <LayoutPreviewItem label="End" />
            </Flex>
        </LayoutPreviewCanvas>
    );
}

Responsive Direction

Change direction based on screen size.

Item 1

Item 2

Responsive Direction

"use client";

import { Flex } from '@photonix/ultimate';

import { LayoutPreviewCanvas, LayoutPreviewItem } from '../_shared/LayoutPreview';

export default function FlexResponsiveDirectionExample() {
    return (
        <LayoutPreviewCanvas>
            <Flex direction={{ base: 'column', md: 'row' }} gap="md">
                <LayoutPreviewItem label="Item 1" fill />
                <LayoutPreviewItem label="Item 2" fill />
            </Flex>
        </LayoutPreviewCanvas>
    );
}

Flex

Preview

Component API

Flex

Spacer

Center

Variants

Direction

Gap

Alignment

Responsive Direction

On this page