Dividers are used to visually separate content in a list or group.



import { Divider } from '@chakra-ui/react'


The Divider displays a thin horizontal or vertical line, and renders an hr tag.

<Divider />

Changing the orientation#

Pass the orientation prop and set it to either horizontal or vertical.

<Divider orientation='horizontal' />

If the vertical orientation is used, make sure that the parent element is assigned a height.

<Center height='50px'>
<Divider orientation='vertical' />

Adding content within a Divider#

In some cases, you might want to add content within a divider. To do this, you can compose the Divider and AbsoluteCenter components.

<Box position='relative' padding='10'>
<Divider />
<AbsoluteCenter bg='white' px='4'>


<Stack direction='row' h='100px' p={4}>
<Divider orientation='vertical' />
<Text>Chakra UI</Text>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel