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;
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;
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;