Photonix

Divider

A visible line to separate content.

Preview

Overview

Activity

Settings

Usage
"use client";

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

export default function DividerBasicExample() {
    return (
        <Box w={360} maxW="100%">
            <Flex gap="md" align="center">
                <Text variant="body-md">Overview</Text>
                <Divider orientation="vertical" variant="solid" />
                <Text variant="body-md">Activity</Text>
                <Divider orientation="vertical" variant="dashed" />
                <Text variant="body-md">Settings</Text>
            </Flex>
            <Divider orientation="horizontal" variant="solid" style={{ marginTop: 16 }} />
        </Box>
    );
}

Component API

Divider

Prop
Type
Default
Description
orientation
"horizontal" | "vertical"
'horizontal'
Orientation of the divider
variant
"solid" | "dashed"
'solid'
Visual style of the divider
thickness
1 | 0.5
1
Thickness of the divider line

Variants

Direction

Vertical dividers generally require a height on the parent.

Horizontal

Divider

Vertical

Divider

Direction
"use client";

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

export default function DividerDirectionExample() {
    return (
        <Flex direction="column" gap="xl">
            <Box>
                <Text>Horizontal</Text>
                <Divider style={{ margin: '8px 0' }} />
                <Text>Divider</Text>
            </Box>

            <Flex h={50} align="center" gap="md">
                <Text>Vertical</Text>
                <Divider orientation="vertical" />
                <Text>Divider</Text>
            </Flex>
        </Flex>
    );
}

On this page

Preview
Component API
Variants
Direction
Photonix UI - React Components, Templates & Figma Design System