Photonix

Layout Showcase

Demonstrating the power of the new Layout system including Box, Flex, Grid, and Stack.

Box Properties

New Box Properties

Box now supports position, overflow, and z-index props directly.

New

Relative Box Container

New Box Properties
<Box position="relative" w={200} h={100} bg="neutral-tertiary" p="md" borderRadius="2xs">
    <Box position="absolute" top={-10} right={-10} zIndex={10}>
        <Badge variant="primary" color="blue">New</Badge>
    </Box>
    <Text>Relative Box Container</Text>
</Box>

Responsive Grid

Responsive Columns

Grid now supports object format for responsive columns (base, sm, md, lg, xl).

Item 1

Item 2

Item 3

Item 4

Responsive Columns
<Grid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} gap="md">
    <PreviewBox>Item 1</PreviewBox>
    <PreviewBox>Item 2</PreviewBox>
    <PreviewBox>Item 3</PreviewBox>
    <PreviewBox>Item 4</PreviewBox>
</Grid>

Grid Areas

Template Areas

Define grid layouts using named areas.

Header

Sidebar

Main Content

Footer

Template Areas
<Grid
    templateAreas="'header header' 'sidebar main' 'footer footer'"
    templateColumns="200px 1fr"
    gap="md"
>
    <GridItem area="header"><PreviewBox height={60}>Header</PreviewBox></GridItem>
    <GridItem area="sidebar"><PreviewBox height={200}>Sidebar</PreviewBox></GridItem>
    <GridItem area="main"><PreviewBox height={200}>Main Content</PreviewBox></GridItem>
    <GridItem area="footer"><PreviewBox height={60}>Footer</PreviewBox></GridItem>
</Grid>

Stack Divider

Smart Dividers

Stack automatically handles divider orientation based on direction.

Horizontal Stack (Row)

Item 1

Item 2

Item 3

Vertical Stack (Column)

Item A

Item B

Item C

Smart Dividers
<HStack gap="md" divider={<Divider />}>
    <PreviewBox width={100}>Item 1</PreviewBox>
    <PreviewBox width={100}>Item 2</PreviewBox>
    <PreviewBox width={100}>Item 3</PreviewBox>
</HStack>

<VStack gap="md" divider={<Divider />}>
    <PreviewBox>Item A</PreviewBox>
    <PreviewBox>Item B</PreviewBox>
</VStack>

Polymorphic Components

The 'as' Prop

Render Flex or Stack as different HTML elements (e.g., section, main, ul).

  • List Item 1

  • List Item 2

  • List Item 3

The 'as' Prop
<Stack as="ul" gap="sm" style={{ listStyle: 'none', padding: 0 }}>
    <Box as="li"><PreviewBox>List Item 1</PreviewBox></Box>
    <Box as="li"><PreviewBox>List Item 2</PreviewBox></Box>
    <Box as="li"><PreviewBox>List Item 3</PreviewBox></Box>
</Stack>

On this page

Box Properties
Responsive Grid
Grid Areas
Stack Divider
Polymorphic Components
Photonix UI - React Components, Templates & Figma Design System