Divider - Dreamy UI

Divider

Divider is used to display line separator between elements.

#

Installation

npx dreamy add divider

pnpm dlx dreamy add divider

yarn dlx dreamy add divider

bunx dreamy add divider

#

Usage

Divider creates a visual separation between sections of content. It can be horizontal or vertical and helps organize your layout.

<Divider />

#

Orientation

You can change the orientation of the Divider by using the orientation prop.

Horizontal

Vertical

<Text semibold>Horizontal</Text>
<Divider orientation="horizontal" />
 
<Text semibold mt={4}>Vertical</Text>
<Divider orientation="vertical" h="100px" />

#

Label

You can add a label between dividers to create a visual separation.

<HStack w="full" align="center">
	<Divider />
	<Text semibold color="fg.medium">OR</Text>
	<Divider />
</HStack>

Date Picker

Editable