---
title: "Divider"
type: component
version: "2.0.4"
doc_version: "2.0.4"
status: stable
date: 2026-03-11
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Divider with horizontal and vertical orientation. Text labels, icons, and color variants for clean section separation in layouts and forms."
url: https://frutjam.com/components/divider
---

# Divider Component

 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

## Divider Directions

### Horizontal Divider

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


### Vertical Divider

```html
<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>
```


## Divider with Text

### Horizontal with Text

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


### Vertical with Text

```html
<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>
```


## Divider Colors

```html
<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>
```


## Divider Content Positions

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

### Horizontal Positions

```html
<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>
```


### Vertical Positions

```html
<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>
```