Implementation:OpenHands OpenHands Divider
| Knowledge Sources | |
|---|---|
| Domains | UI_Components, React |
| Last Updated | 2026-02-11 21:00 GMT |
Overview
A simple visual separator component that renders a horizontal or vertical line between content sections.
Description
The Divider component renders a thin line to visually separate adjacent content areas. It supports two orientations via the type prop: "horizontal" (spanning the full width) and "vertical" (spanning the full height of its container). At only 30 lines of source code, it is one of the simplest components in the OpenHands UI library.
Usage
Use the Divider to create visual separation between sections of a layout, items in a list, or groups of controls in a toolbar. The horizontal variant is suited for stacked layouts, while the vertical variant is useful within flex row containers.
Code Reference
Source Location
openhands-ui/components/divider/Divider.tsx (30 lines)
Signature
interface DividerProps {
type?: "horizontal" | "vertical";
}
Import
import { Divider } from "@openhands/ui";
I/O Contract
Inputs (Props)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
type |
"horizontal" | "vertical" |
No | "horizontal" |
The orientation of the divider line. |
Outputs
Renders an <hr> or styled <div> element that acts as a visual separator in the specified orientation.
Usage Examples
import { Divider } from "@openhands/ui";
function SettingsPanel() {
return (
<div>
<h3>General Settings</h3>
{/* general settings controls */}
<Divider />
<h3>Advanced Settings</h3>
{/* advanced settings controls */}
</div>
);
}
function Toolbar() {
return (
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
<button>Cut</button>
<button>Copy</button>
<Divider type="vertical" />
<button>Undo</button>
<button>Redo</button>
</div>
);
}