Divider

Visual separator for content sections. Creates clear boundaries between different parts of your UI.

Installation

Import

import { Divider } from '@svelte-atoms/core/divider';

Customize the divider appearance using presets

You can customize the default styles for Divider components by defining presets in your configuration:

Explore different divider variations

Default horizontal separator

Content above

Content below

Code

<Divider />

Vertical separator for inline content

Item 1

Item 2

Item 3

Code

<Divider orientation="horizontal" />
<Divider orientation="vertical" />

Divider containing text or content

Code

<Divider>
  <span>OR</span>
</Divider>

Prop

Type

Default

Description

vertical

boolean | undefined

false

Vertical

transparent

boolean | undefined

false

Transparent

...atomProps

HtmlAtomProps

All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.