---
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/tr/components/divider
---

# Divider Component

Bölücü bileşenler içerik bölümleri arasında görsel ayrım oluşturur. Hafif ve anlamsal olan bölücüler, bilgilerin hiyerarşik olarak yapılandırılmasına ve okunabilirliğin geliştirilmesine yardımcı olur. Frutjam bölme sistemi, bölümler arasındaki etiketli ayrımlar için isteğe bağlı metin içeriğiyle yatay ve dikey yönlendirmeleri destekler.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf              | Tip         | Tanım                                                |
| ------------------ | ----------- | ---------------------------------------------------- |
| divider            | Temel       | İsteğe bağlı ortalanmış etiket metniyle yatay cetvel |
| divider-horizontal | Değiştirici | Yatay yönlendirme (varsayılan)                       |
| divider-vertical   | Değiştirici | Dikey yönlendirme                                    |
| divider-start      | Değiştirici | Etiket metnini başlangıca hizalar                    |
| divider-end        | Değiştirici | Etiket metnini sona hizalar                          |
| divider-solid      | Stil        | Düz çizgi stili                                      |
| divider-dashed     | Stil        | Kesikli çizgi stili                                  |
| divider-dotted     | Stil        | Noktalı çizgi stili                                  |
| divider-primary    | Renk        | Birincil tema rengi                                  |
| divider-secondary  | Renk        | İkincil tema rengi                                   |
| divider-accent     | Renk        | Vurgu teması rengi                                   |
| divider-neutral    | Renk        | Nötr tema rengi                                      |
| divider-info       | Renk        | Bilgi anlamsal rengi                                 |
| divider-success    | Renk        | Başarı anlamsal rengi                                |
| divider-warning    | Renk        | Uyarı anlamsal rengi                                 |
| divider-error      | Renk        | Hata anlamsal rengi                                  |

## Temel Kullanım

## Bölücü Yönleri

### Yatay Bölücü

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

### Dikey Bölücü

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

## Metinli Bölücü

### Metinli Yatay

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

### Metinli Dikey

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

## Bölücü Renkler

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

## Bölücü İçerik Konumları

Bölücü içindeki metni satırın başına, ortasına (varsayılan) veya sonuna hizalayabilirsiniz.

### Yatay Konumlar

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

### Dikey Pozisyonlar

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