---
title: "Divider"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/vi/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.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học            | Kiểu            | Sự miêu tả                                        |
| ------------------ | --------------- | ------------------------------------------------- |
| divider            | Căn cứ          | Horizontal rule with optional centered label text |
| divider-horizontal | Công cụ sửa đổi | Horizontal orientation (default)                  |
| divider-vertical   | Công cụ sửa đổi | Vertical orientation                              |
| divider-start      | Công cụ sửa đổi | Aligns label text to the start                    |
| divider-end        | Công cụ sửa đổi | Aligns label text to the end                      |
| divider-solid      | Phong cách      | Solid line style                                  |
| divider-dashed     | Phong cách      | Dashed line style                                 |
| divider-dotted     | Phong cách      | Dotted line style                                 |
| divider-primary    | Màu sắc         | Màu chủ đề chính                                  |
| divider-secondary  | Màu sắc         | Màu chủ đề phụ                                    |
| divider-accent     | Màu sắc         | Màu chủ đề nhấn mạnh                              |
| divider-neutral    | Màu sắc         | Màu chủ đề trung tính                             |
| divider-info       | Màu sắc         | Màu sắc ngữ nghĩa thông tin                       |
| divider-success    | Màu sắc         | Màu ngữ nghĩa thành công                          |
| divider-warning    | Màu sắc         | Màu ngữ nghĩa cảnh báo                            |
| divider-error      | Màu sắc         | Lỗi ngữ nghĩa màu sắc                             |

## Cách sử dụng cơ bản

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