Aller au contenu principal

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​

PropTypeDefaultDescription
orientation"horizontal" , "vertical""horizontal"Defines the divider's orientation.
flexItembooleanfalseAllows the divider to stretch when inside a flex container.

Example Usage​

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