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

# Divider Component

Komponenty rozdzielające tworzą wizualną separację pomiędzy sekcjami treści. Lekkie i semantyczne dzielniki pomagają hierarchizować informacje i poprawiają czytelność. System przekładek Frutjam obsługuje orientację poziomą i pionową z opcjonalną zawartością tekstową dla oznaczonych separacji pomiędzy sekcjami.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa              | Typ         | Opis                                                       |
| ------------------ | ----------- | ---------------------------------------------------------- |
| divider            | Opierać     | Linia pozioma z opcjonalnym wyśrodkowanym tekstem etykiety |
| divider-horizontal | Modyfikator | Orientacja pozioma (domyślna)                              |
| divider-vertical   | Modyfikator | Orientacja pionowa                                         |
| divider-start      | Modyfikator | Wyrównuje tekst etykiety do początku                       |
| divider-end        | Modyfikator | Wyrównuje tekst etykiety do końca                          |
| divider-solid      | Styl        | Styl linii ciągłej                                         |
| divider-dashed     | Styl        | Styl linii przerywanej                                     |
| divider-dotted     | Styl        | Styl linii przerywanej                                     |
| divider-primary    | Kolor       | Podstawowy kolor motywu                                    |
| divider-secondary  | Kolor       | Kolor motywu drugorzędnego                                 |
| divider-accent     | Kolor       | Kolor motywu akcentującego                                 |
| divider-neutral    | Kolor       | Neutralny kolor motywu                                     |
| divider-info       | Kolor       | Kolor semantyczny informacji                               |
| divider-success    | Kolor       | Sukces semantyczny kolor                                   |
| divider-warning    | Kolor       | Ostrzeżenie kolor semantyczny                              |
| divider-error      | Kolor       | Błąd koloru semantycznego                                  |

## Podstawowe użycie

## Kierunki rozdzielacza

### Rozdzielacz poziomy

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

### Rozdzielacz pionowy

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

## Dzielnik z tekstem

### Poziomo z tekstem

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

### Pionowo z tekstem

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

## Kolory rozdzielacza

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

## Pozycje treści rozdzielacza

Tekst w obrębie separatora można wyrównać do początku, środka (domyślnie) lub końca linii.

### Pozycje poziome

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

### Pozycje pionowe

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