Visually or semantically separates content.
<Text size="2">
Tools for building high-quality, accessible UI.
<Separator my="3" size="4" />
<Flex gap="3" align="center">
Themes
<Separator orientation="vertical" />
Primitives
<Separator orientation="vertical" />
Icons
<Separator orientation="vertical" />
Colors
</Flex>
</Text>
This component inherits props from the Radix Separator primitive and supports common margin props.
Use the size prop to control the size of the separator. The largest step takes full width or height of the container.
<Flex direction="column" gap="4">
<Separator orientation="horizontal" size="4" />
<Separator orientation="horizontal" size="3" />
<Separator orientation="horizontal" size="2" />
<Separator orientation="horizontal" size="1" />
</Flex>
<Flex align="center" gap="4" style={{ height: 96 }}>
<Separator orientation="vertical" size="4" />
<Separator orientation="vertical" size="3" />
<Separator orientation="vertical" size="2" />
<Separator orientation="vertical" size="1" />
</Flex>
Use the color prop to assign a specific color, ignoring the global theme.
<Flex direction="column" gap="3">
<Separator color="indigo" size="4" />
<Separator color="cyan" size="4" />
<Separator color="orange" size="4" />
<Separator color="crimson" size="4" />
</Flex>
Use the orientation prop to control whether the separator is horizontal or vertical.
<Flex align="center" gap="4">
<Separator orientation="horizontal" />
<Separator orientation="vertical" />
</Flex>