Skip to content

Divider ​

Divider for separating content blocks.

Horizontal Divider ​

Renders a horizontal divider by default.

tsx
import { Divider } from '@airo-ui/react'

function Demo() {
  return (
    <div>
      <p>Above content</p>
      <Divider />
      <p>Below content</p>
    </div>
  )
}

With Text ​

Insert text in the middle of the divider.

tsx
<p>Content area</p>
<Divider>Section</Divider>
<p>Another area</p>

Dashed ​

tsx
<Divider dashed />
<Divider dashed>Dashed Section</Divider>

API ​

Props ​

NameTypeDefaultDescription
dashedbooleanfalseDashed style
childrenReact.ReactNode--Text content in the middle

MIT License