Divider 

Ripple UI comes with component to separate your elements with a divider.

Default 

Simple example of Divider.

HTML
JSX
<div class="divider"></div>

Horizontal Divider 

Horizontal divider with text in the middle .

OR
HTML
JSX
<div class="divider divider-horizontal">OR</div>

Vertical Divider 

Vertical divider with text in the middle.

OR
HTML
JSX
<div class="divider divider-vertical h-44">OR</div>

Start Text Divider 

Divider with text at the start.

OR
HTML
JSX
<div class="flex items-center gap-1">
	OR
	<div class="divider divider-horizontal w-full"></div>
</div>

End Text Divider 

Divider with text at the end.

OR
HTML
JSX
<div class="flex items-center gap-1">
	<div class="divider divider-horizontal w-full"></div>
	OR
</div>

With containers 

Divider with containers.

Default
Default
HTML
JSX
<div class="flex w-full justify-center gap-4">
	<div class="card max-w-full items-center justify-center">Default</div>
	<div class="divider divider-vertical mx-0 h-44"></div>
	<div class="card max-w-full items-center justify-center">Default</div>
</div>

API 

classDescription
dividerDivider base class
divider-horizontalSet horizontal orientation
divider-verticalSet vertical orientation
DotsDropdown
Edit this page on GitHub