Photonix UI - React Components, Templates & Figma Design System

Stack

A vertical layout container that manages spacing between elements.

Preview

Item 1

Item 2

Item 3

Usage

"use client";

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

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

export default function StackBasicExample() {
    return (
        <LayoutPreviewCanvas>
            <Stack direction="row" gap="sm" align="center" wrap>
                <LayoutPreviewItem label="Item 1" />
                <LayoutPreviewItem label="Item 2" />
                <LayoutPreviewItem label="Item 3" />
            </Stack>
        </LayoutPreviewCanvas>
    );
}

Component API

Stack

Prop	Type	Default	Description
direction	`ResponsiveValue<FlexDirection>`	`'column'`	Flex direction
gap	`ResponsiveValue<SpacingToken>`	`-`	Gap between children using spacing tokens
spacing	`ResponsiveValue<SpacingToken>`	`-`	Spacing alias for gap
align	`ResponsiveValue<AlignItems>`	`-`	Align items along the cross axis
justify	`ResponsiveValue<JustifyContent>`	`-`	Justify content along the main axis
wrap	`ResponsiveValue<boolean>`	`-`	Whether to wrap children
divider	`React.ReactNode`	`-`	Optional divider element between items
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
columnGap	`ResponsiveValue<SpacingToken>`	`-`	Column gap
rowGap	`ResponsiveValue<SpacingToken>`	`-`	Row gap
alignItems	`ResponsiveValue<AlignItems>`	`-`	Align items (cross axis)
alignContent	`ResponsiveValue<string>`	`-`	Align content (multiline)
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>`	`-`
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>`	`-`

VStack / HStack

Prop	Type	Default	Description
gap	`string`	`'md'`	Spacing between items.
align	`string`	`-`	Cross-axis alignment.
children	`ReactNode`	`-`	Content.

Variants

Gap

Easily control vertical spacing.

Item 1

Item 2

Gap

"use client";

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

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

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

Alignment

Align items to start, center, end, or stretch.

Centered

Alignment

"use client";

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

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

export default function StackAlignExample() {
    return (
        <LayoutPreviewCanvas>
            <Stack align="center" gap="md">
                <LayoutPreviewItem label="Centered" w="50%" />
                <LayoutPreviewItem label="Centered" w="70%" />
            </Stack>
        </LayoutPreviewCanvas>
    );
}

Divider

Automatically add separators between items.

Item 1

Item 2

Item 3

Divider

"use client";

import { Divider, Stack } from '@photonix/ultimate';

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

export default function StackDividerExample() {
    return (
        <LayoutPreviewCanvas>
            <Stack gap="md" divider={<Divider />}>
                <LayoutPreviewItem label="Item 1" />
                <LayoutPreviewItem label="Item 2" />
                <LayoutPreviewItem label="Item 3" />
            </Stack>
        </LayoutPreviewCanvas>
    );
}

Responsive Stack

Change spacing and direction responsively.

Item 1

Item 2

Responsive Stack

"use client";

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

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

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

Stack

Preview

Component API

Stack

VStack / HStack

Variants

Gap

Alignment

Divider

Responsive Stack

On this page