Separator

Visually or semantically separates content.

Tools for building high-quality, accessible UI.

Themes

Primitives

Icons

Colors

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

API Reference

This component wraps the Separator primitive and supports common margin props.

Prop	Type	Default	Description
`class`	`string`	`nil`	Additional CSS classes
`color`	`string`	`—`	Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
`decorative`	`boolean`	`false`	Whether the separator is purely decorative
`m`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`mb`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`ml`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`mr`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`mt`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`mx`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`my`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`orientation`	`string`	`"horizontal"`	Separator orientation
`size`	`string`	`"1"`	Separator size
`style`	`string`	`nil`	Additional inline styles

class Additional CSS classes

Type string Default nil

color Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.

Type string Default —

decorative Whether the separator is purely decorative

Type boolean Default false

m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

orientation Separator orientation

Type string Default "horizontal"

size Separator size

Type string Default "1"

style Additional inline styles

Type string Default nil

Examples

Size

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="1" /><.separator orientation="horizontal" size="2" /><.separator
    orientation="horizontal"
    size="3"
  /><.separator orientation="horizontal" size="4" />
</.flex>

<.flex align="center" gap="4" height="96px">
  <.separator orientation="vertical" size="1" /><.separator orientation="vertical" size="2" /><.separator
    orientation="vertical"
    size="3"
  /><.separator orientation="vertical" size="4" />
</.flex>

Color

Use the color prop to assign a specific accent color.

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

Orientation

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>