For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/divider.md.
Leaf UI
  • English

      • Divider

      Separate content, paragraphs or actions.

      Basic usage

      Project details

      EditShareArchive
      basic.tsx
      import { Divider, Space } from '@ifhover/leaf-ui';

export function DividerBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <p>Project details</p>
      <Divider>Settings</Divider>
      <Divider align="start" dashed>
        More content
      </Divider>
      <div>
        Edit
        <Divider type="vertical" />
        Share
        <Divider type="vertical" dashed />
        Archive
      </div>
    </Space>
  );
}

      Divider API

      PropertyTypeDefaultDescription
      type'horizontal' | 'vertical''horizontal'Orientation
      align'start' | 'center' | 'end''center'Text alignment
      dashedbooleanfalseDashed line
      childrenReactNode—Horizontal divider text

      Types

      Import the exported types when defining props or building item lists.

      import type { DividerProps } from '@ifhover/leaf-ui';

      Usage notes

      Use vertical dividers between inline content.