Divider

The Divider component is used to separate content with a horizontal or vertical line. It provides customization options for color, thickness, and alignment.

Props

Name	Type	Default	Description
children	`string` \| `React.ReactElement` \| `React.ReactElement[]` \| `React.ReactNode`		Content to be displayed alongside the divider.
childrenAlign	`"start"` \| `"center"` \| `"end"`	`"center"`	Alignment of content with respect to the divider.
childrenGap	`number`		Gap between content and divider.
color	`string`		Color of the divider line.
indent	`number`		Indentation of the divider line.
endIndent	`number`		Indentation of the divider line at the end.
thickness	`number`		Thickness of the divider line.
orientation	`"horizontal"` \| `"vertical"`	`"horizontal"`	Orientation of the divider.

Try It

Open Sandbox

import { Divider } from '@kloktun/uikit'

export default function DividerExample() {
    return (
        <div className="flex flex-col w-full gap-4">
            
            <Divider />

            <Divider indent={100} endIndent={100} />
            
            <Divider>Content Above Divider</Divider>
            
            <Divider color="#00aa00" thickness={2} childrenAlign="start">Content Left of Divider</Divider>

            <Divider childrenGap={60} childrenAlign="end">Content Right of Divider with children Gap</Divider>

            <div className="flex flex-row items-stretch gap-4">
                Text example
                <div>
                    <Divider orientation="vertical" />
                </div>
                Text example
            </div>

        </div>
    );
}

EmptyPlaceholder Shimmer