Photonix

Container

Centers content with a maximum width.

Preview

Content stays readable inside a predictable max width.

Usage
"use client";

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

export default function ContainerBasicExample() {
    return (
        <Container maxWidth="md" padding="md">
            <Box bg="secondary" borderRadius="md" p="lg" textAlign="center">
                <Text variant="title-md">Content stays readable inside a predictable max width.</Text>
            </Box>
        </Container>
    );
}

Component API

Container

Prop
Type
Default
Description
maxWidth
ResponsiveValue<string | number>
'full'
Maximum width of the container
size
ResponsiveValue<string | number>
-
Alias for maxWidth
fluid
boolean
-
Whether to take up 100% width (alias for maxWidth="full")
centerContent
boolean
false
Whether to center the content
padding
ResponsiveValue<SpacingToken>
-
Padding alias (px usually)
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 items
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>
-

Variants

Max Width Sizes

Containers come in various standard widths.

SM

MD

LG

Max Width Sizes
"use client";

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

export default function ContainerSizesExample() {
    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '100%' }}>
            <Container maxWidth="sm" style={{ background: 'var(--surface-neutral-secondary)', padding: '8px' }}><Text align="center">SM</Text></Container>
            <Container maxWidth="md" style={{ background: 'var(--surface-neutral-secondary)', padding: '8px' }}><Text align="center">MD</Text></Container>
            <Container maxWidth="lg" style={{ background: 'var(--surface-neutral-secondary)', padding: '8px' }}><Text align="center">LG</Text></Container>
        </div>
    );
}

Centered Content

Containers are centered by default.

Left Aligned

Centered

Centered Content
"use client";

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

export default function ContainerCenteredExample() {
    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '100%' }}>
            <Container centerContent={false} maxWidth="sm" style={{ background: 'var(--surface-neutral-secondary)', padding: '8px' }}><Text align="center">Left Aligned</Text></Container>
            <Container maxWidth="sm" style={{ background: 'var(--surface-neutral-secondary)', padding: '8px' }}><Text align="center">Centered</Text></Container>
        </div>
    );
}

Responsive Container

Different max-widths for different breakpoints.

Responsive Width

Responsive Container
"use client";

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

export default function ContainerResponsiveExample() {
    return (
        <Container maxWidth={{ base: 'sm', lg: 'xl' }} style={{ background: 'var(--surface-neutral-secondary)', padding: '8px' }}>
            <Text align="center">Responsive Width</Text>
        </Container>
    );
}

On this page

Preview
Component API
Variants
Max Width Sizes
Centered Content
Responsive Container
Photonix UI - React Components, Templates & Figma Design System