Divider

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Import#

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

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

<Divider />

<Divider />

Editable Example

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

<Divider orientation="horizontal" />

<Divider orientation="horizontal" />

Editable Example

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

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

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

Editable Example

Chakra UI

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

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

Editable Example

Name	Type	Description	Default
colorScheme	`"blue" \| "cyan" \| "gray" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "teal" \| "yellow" \| "whiteAlpha" \| "blackAlpha" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram"`	Color Schemes for `Divider` are not implemented in the default theme. You can extend the theme to implement them.	-
size	`string`	Sizes for `Divider` are not implemented in the default theme. You can extend the theme to implement them.	-
variant	`"dashed" \| "solid"`		`"solid"`