Divider

A cross-platform React divider component for visually separating content sections. Supports horizontal and vertical orientations.

Installation

npm install @xsolla/xui-divider
# or
yarn add @xsolla/xui-divider

Demo

Basic Divider

import * as React from 'react';
import { Divider } from '@xsolla/xui-divider';

export default function BasicDivider() {
  return (
    <div>
      <p>Content above</p>
      <Divider />
      <p>Content below</p>
    </div>
  );
}

Vertical Divider

import * as React from 'react';
import { Divider } from '@xsolla/xui-divider';

export default function VerticalDivider() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', height: 40 }}>
      <span>Left</span>
      <Divider orientation="vertical" />
      <span>Right</span>
    </div>
  );
}

API Reference

Divider

Divider Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | orientation | "horizontal" \| "vertical" | "horizontal" | Direction of the divider. |

Theming

theme.colors.border.primary  // Divider color