Site settings
Change the appearance of the site to suit your preferences
Separator
Separators, or dividing lines, are used to separate different sections or parts of content from each other.
A simple separator
<Separator />
Different Sizes
<Stack spacing={3}> <Separator size="sm" /> <Separator size="md" /> <Separator size="lg" /> <Separator size="sm" variant="dashed" /> <Separator size="md" variant="dashed" /> <Separator size="lg" variant="dashed" /> </Stack>
Different Variants
<Stack spacing={3}> <Separator variant="solid" /> <Separator variant="dashed" /> </Stack>
A Vertical Separator
<Center height="5rem" gap="3"> <Separator orientation="vertical" /> <Separator orientation="vertical" variant="dashed" /> </Center>
A responsive Separator
<Center display="flex" gap="2" flexDirection={{mdDown: "column", md: "row"}} height="5rem"> 1 <Separator variant="dashed" orientation={{mdDown: "horizontal", md: "vertical"}} /> 2 </Center>;