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

orientation

'horizontal' | 'vertical'

'horizontal'

Divider orientation

class

string

Additional CSS classes