Components

Divider

Separate adjacent content with a decorative line.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { VStack, Text } from '@swiftuijs/ui';
import { Divider } from '@swiftuijs/ui';
export default function Example() {
    return ((<VStack spacing={10}>
      <Text>Above</Text>
      <Divider />
      <Text>Below</Text>
    </VStack>));
}

Custom Styling

Apply custom styles to Divider:

Usage and limitations

  • Orientation follows the surrounding stack’s layout context; an HStack produces a vertical divider.
  • Use between list items or sections, with appropriate spacing. Customize with style.
  • The line does not provide a semantic heading; use text to name groups of content.

More examples

In HStack
In VStack
Multiple Dividers
With Buttons
In List
Custom Styling

API reference

This component currently relies on inherited element props.

Inherits additional props from Omit<IBaseComponent, 'children'>.