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'>.