---
id: divider
title: Divider
category: 'data-display'
package: '@chakra-ui/layout'
description: Dividers are used to visually separate content in a list or group.
---

## Import

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

## Usage

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

```jsx
<Divider />
```

### Changing the orientation

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

```jsx
<Divider orientation='horizontal' />
```

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

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

### 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.

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

## Composition

```jsx
<Stack direction='row' h='100px' p={4}>
  <Divider orientation='vertical' />
  <Text>Chakra UI</Text>
</Stack>
```