Divider

A thin horizontal or vertical line used to separate content.

Overview

Dividers visually separate content into sections. Use HorizontalDivider for horizontal lines and VerticalDivider for vertical lines.

Basic Usage

// Horizontal divider
Column {
    Text("Section 1")
    HorizontalDivider()
    Text("Section 2")
}

// Vertical divider
Row {
    Text("Column 1")
    VerticalDivider()
    Text("Column 2")
}

Divider Examples

import Foundation
import JavaScriptKit
import Observation
import Shaft
import ShaftWeb

Shaft.backend = ShaftWebBackend { _ in
    JSObject.global.document.querySelector("canvas")
}

runApp(DividerDemoApp())

final class DividerDemoApp: StatelessWidget {
    func build(context: any BuildContext) -> any Widget {
        Column(crossAxisAlignment: .stretch, spacing: 24) {
            Text("Divider Examples")
                .textStyle(.init(fontSize: 24, fontWeight: .bold))
                .center()

            // Horizontal Divider
            Column(crossAxisAlignment: .stretch) {
                Text("Section 1")
                    .padding(.all(16))
                    .decoration(.box(color: Color(0xFF_E3F2FD)))

                HorizontalDivider()

                Text("Section 2")
                    .padding(.all(16))
                    .decoration(.box(color: Color(0xFF_E8F5E9)))

                HorizontalDivider()

                Text("Section 3")
                    .padding(.all(16))
                    .decoration(.box(color: Color(0xFF_FFF3E0)))
            }

            // Vertical Divider
            Row(crossAxisAlignment: .stretch) {
                Text("A")
                    .padding(.all(16))
                    .decoration(.box(color: Color(0xFF_FCE4EC)))

                VerticalDivider()

                Text("B")
                    .padding(.all(16))
                    .decoration(.box(color: Color(0xFF_F3E5F5)))

                VerticalDivider()

                Text("C")
                    .padding(.all(16))
                    .decoration(.box(color: Color(0xFF_E8EAF6)))
            }
        }
        .padding(.all(24))
    }
}

Open in full playground

With Padding

Add space around the divider:

HorizontalDivider(padding: .symmetric(vertical: 16))

VerticalDivider(padding: .symmetric(horizontal: 16))

Section Divider with Text

Column(crossAxisAlignment: .stretch) {
    Text("Group 1")
        .padding(.all(16))
    
    HorizontalDivider(padding: .symmetric(vertical: 8))
    
    Text("Group 2")
        .padding(.all(16))
}

Custom Styling

Create custom divider styles:

struct ThickDividerStyle: DividerStyle {
    func build(context: DividerStyleContext) -> Widget {
        context.child
            .decoration(.box(color: Color(0xFF_333333)))
    }
}

// Apply to all dividers in subtree
Column {
    HorizontalDivider()
    HorizontalDivider()
}
.dividerStyle(ThickDividerStyle())

Parameters

HorizontalDivider

Parameter	Type	Description	Default
`padding`	`EdgeInsetsGeometry`	Space around divider	`.zero`

VerticalDivider

Parameter	Type	Description	Default
`padding`	`EdgeInsetsGeometry`	Space around divider	`.zero`