Divider

A divider line to separate content.

Basic Usage

Separate paragraphs of text in different sections.

Basic Usage

Custom Content

You can customize the text content on the divider line.

Custom Content

Vertical Divider

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

Vertical Divider

Dashed Line

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

Dashed Line

Custom Color and Thickness

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

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.

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

Events

This component does not expose component events.

Expose

This component does not expose public instance methods or properties.

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)

Type Exports

Name	Description
YhDividerProps	Component props type
YhDividerInstance	Component instance type