Components

Divider

Visually separates content using a horizontal line. Useful for structuring layouts and improving content readability.

Divider

TextLineDivider

Component

View code

Show playground

Props

Props	Default	Type
`orientation`	`Orientation.HORIZONTAL`	`Orientation`
`hideOnMobile`	`false`	`boolean`
`dividerClass`	—	`string`

Usage

orientation

Sets the orientation of the divider. Uses the Orientation enum.

 <template>
    <Divider :orientation="Orientation.VERTICAL" />
</template>

Type: Orientation
Default: Orientation.HORIZONTAL

Options

Value	Description
`HORIZONTAL`	horizontal
`VERTICAL`	vertical

hideOnMobile

Hides the divider on mobile devices.

 <template>
    <Divider :hideOnMobile="true" />
</template>

Type: boolean
Default: false

dividerClass

Overrides the divider's line class (color and thickness). Falls back to border-border-default (horizontal) / bg-border-default (vertical) when not set.

 <template>
    <Divider dividerClass="border-border-neutral-subtle" />
</template>

Type: string
Default: undefined

Custom styles

The divider can be styled by passing Tailwind classes through class prop.

 <template>
    <Divider class="border-2 border-black" />
</template>