Skip to content

Divider Component

Divider Component

Description

The Divider component is used to separate content with a thin line. It can be displayed horizontally or vertically, and it adapts to dark mode automatically.

Props

Prop Type Default Description
orientation "horizontal" , "vertical" "horizontal" Defines the divider's orientation.
flexItem boolean false Allows the divider to stretch when inside a flex container.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { Divider } from "@nomana-it/liberty-core"

export const DividerExample = () => {
  return (
    <div>
      <p>Above the divider</p>
      <Divider />
      <p>Below the divider</p>

      <div style={{ display: "flex", alignItems: "center", height: "50px", gap: "10px" }}>
        <span>Item 1</span>
        <Divider orientation="vertical" flexItem />
        <span>Item 2</span>
      </div>
    </div>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core