react ant design 5 divider example

react ant design 5 divider example

updated 26/05/23 By frontendshape

In this tutorial, we will create divider line in react with ant design 5. We will see ant design 5 divider with typescript, divider with text example with react ant design 5.

install & setup vite + react + typescript + ant design 5


React Ant Design 5 Divider Example

1. Create react ant design 5 divider using react-antd Divider component.

import React from "react";
import { Divider } from "antd";

const App: React.FC = () => (
  <>
    <p>Lorem ipsum ...</p>
    <Divider />
    <p>Lorem ipsum ...</p>
    <Divider dashed />
    <p>Lorem ipsum ...</p>
  </>
);

export default App;
react ant design 5 divider

react ant design 5 divider

2. react ant design 5 divider line text, left side text, left right text.

import React from "react";
import { Divider } from "antd";

const App: React.FC = () => (
  <>
    <p>Lorem ipsum ...</p>
    <Divider plain>Text</Divider>
    <p>Lorem ipsum ...</p>
    <Divider orientation="left" plain>
      Left Text
    </Divider>
    <p>Lorem ipsum ...</p>
    <Divider orientation="right" plain>
      Right Text
    </Divider>
    <p>Lorem ipsum ...</p>
  </>
);

export default App;
ant design 5 divider line text

ant design 5 divider line text

3. react ant design 5 divider with inner title, set orientation="left/right" to align it.

import React from "react";
import { Divider } from "antd";

const App: React.FC = () => (
  <>
    <p>Lorem ipsum ...</p>
    <Divider>Text</Divider>
    <p>Lorem ipsum ...</p>
    <Divider orientation="left">Left Text</Divider>
    <p>Lorem ipsum ...</p>
    <Divider orientation="right">Right Text</Divider>
    <p>Lorem ipsum ...</p>
    <Divider orientation="left" orientationMargin="0">
      Left Text with 0 orientationMargin
    </Divider>
    <p>Lorem ipsum ...</p>
    <Divider orientation="right" orientationMargin={50}>
      Right Text with 50px orientationMargin
    </Divider>
    <p>Lorem ipsum ...</p>
  </>
);

export default App;


4. react ant design 5 vertical divider line.

import React from 'react';
import { Divider } from 'antd';

const App: React.FC = () => (
  <>
    Text
    <Divider type="vertical" />
    <a href="#">Link</a>
    <Divider type="vertical" />
    <a href="#">Link</a>
  </>
);

export default App;
react ant design 5 vertical divider line

react ant design 5 vertical divider line