Divider Component

A clean, accessible divider component built with semantic HTML and Tailwind CSS. Separate content sections visually with horizontal and vertical lines. Supports text labels, icons, and color variants for flexible section separators in layouts, forms, and navigation menus.

Divider components create visual separation between content sections. Lightweight and semantic, dividers help structure information hierarchically and improve readability. The Frutjam divider system supports horizontal and vertical orientations with optional text content for labeled separations between sections.

Class	Type	Description
divider	Base	Horizontal rule with optional centered label text
divider-horizontal	Modifier	Horizontal orientation (default)
divider-vertical	Modifier	Vertical orientation
divider-start	Modifier	Aligns label text to the start
divider-end	Modifier	Aligns label text to the end
divider-solid	Style	Solid line style
divider-dashed	Style	Dashed line style
divider-dotted	Style	Dotted line style
divider-primary	Color	Primary theme color
divider-secondary	Color	Secondary theme color
divider-accent	Color	Accent theme color
divider-neutral	Color	Neutral theme color
divider-info	Color	Info semantic color
divider-success	Color	Success semantic color
divider-warning	Color	Warning semantic color
divider-error	Color	Error semantic color

Basic Usage

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

<div className="divider"></div>

View Code

Divider Directions

Horizontal Divider

<div class="divider divider-horizontal"></div>

View Code

Vertical Divider

content 1

content 2

<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical"></div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

View Code

Divider with Text

Horizontal with Text

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

View Code

Vertical with Text

content 1

content 2

<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical">OR</div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

View Code

Divider Colors

Default

Neutral

Primary

Secondary

Accent

Success

Warning

Info

Error

<div class="flex flex-col gap-8 w-full">
  <div class="divider">Default</div>
  <div class="divider divider-neutral">Neutral</div>
  <div class="divider divider-primary">Primary</div>
  <div class="divider divider-secondary">Secondary</div>
  <div class="divider divider-accent">Accent</div>
  <div class="divider divider-success">Success</div>
  <div class="divider divider-warning">Warning</div>
  <div class="divider divider-info">Info</div>
  <div class="divider divider-error">Error</div>
</div>

View Code

Divider Content Positions

You can align the text within a divider to the start, center (default), or end of the line.

Horizontal Positions

Start

Default

End

<div class="flex w-full gap-8 flex-col">
  <div class="divider divider-start">Start</div>
  <div class="divider">Default</div>
  <div class="divider divider-end">End</div>
</div>

View Code

Vertical Positions

Start

Default

End

<div class="flex justify-center w-full h-64 gap-12">
  <div class="divider divider-vertical divider-start">Start</div>
  <div class="divider divider-vertical">Default</div>
  <div class="divider divider-vertical divider-end">End</div>
</div>

View Code