Divider

A divider line to separate content.

Basic Usage

Separate paragraphs of text in different sections.

Youth is a common name, it is happy and beautiful, but it is also full of hard training.

The white sun sets behind the mountain, the Yellow River flows into the sea. To see a thousand miles, go up another level.

If you don't work hard when you are young, you will be sorry when you are old.

Basic Usage

Custom Content

You can customize the text content on the divider line.

Rain falls in the old hometown, the grass and trees are deep, I heard you still guard the lonely city.

Left Text

The sound of the shepherd's flute in the suburbs, falling in that wild village.

Center Text

Fate takes root and sprouts in us.

Right Text

Listening to the rain at Jialan Temple, looking forward to eternity.

Custom Content

Vertical Divider

Use direction="vertical" to create a vertical divider.

Rain

Falls

Deep

Vertical Divider

Dashed Line

Set border-style="dashed" to present a dashed line.

Content Area

Content Area

Dotted Line

Content Area

Dashed Line

Custom Color and Thickness

Use color and border-width attributes to customize the color and thickness of the divider.

Default Style

Custom Color

Custom Thickness (2px)

Thick Line + Dashed

Custom Divider with Text

Important Split

Custom Color and Thickness

Use in Nuxt

The Divider component fully supports Nuxt 3/4 environments. As a purely presentational component, its HTML structure is generated directly on the server, achieving perfect visual separation on the first screen with inline or external stylesheets.

YH-UI runs extremely smoothly in Nuxt.

Nuxt SSR

Component 1

Component 2

Component 3

Use in Nuxt

SSR Notes:

• ✅ Horizontal and vertical directions are generated correctly on the server.
• ✅ Content position is correctly positioned during the SSR phase.
• ✅ Dashed/dotted styles and custom thickness take effect on the server via styles.
• ✅ Auto-import feature makes the development experience more pleasant.

Performance Tip

Since the Divider component has a minimalist structure, it generates almost no extra JS payload in SSR scenarios, making it ideal for content-heavy Nuxt pages that prioritize loading speed.

API

Props

Prop	Description	Type	Default
direction	Divider direction	'horizontal' | 'vertical'	'horizontal'
content-position	Content position	'left' | 'center' | 'right'	'center'
border-style	Divider border style	'solid' | 'dashed' | 'dotted' | 'double'	'solid'
border-width	Divider border width	string | number	1px
color	Divider color	string	—

Slots

Slot Name	Description
default	Content text of the divider

Theme Variables

Variable	Description	Default
--yh-divider-border-color	Divider border color	var(--yh-border-color-lighter)
--yh-divider-border-width	Divider border width	1px
--yh-divider-border-style	Divider border style	solid
--yh-divider-margin-horizontal	Horizontal margin	24px 0
--yh-divider-margin-vertical	Vertical margin	0 8px
--yh-divider-text-color	Content text color	var(--yh-text-color-primary)