# @synerise/ds-divider

> Divider UI Component for the Synerise Design System

Latest version **2.0.5** (published 2026-09-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @synerise/ds-divider
pnpm add @synerise/ds-divider
yarn add @synerise/ds-divider
bun add @synerise/ds-divider
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.5 |
| Published | 2026-09-22 |
| First published | 2019-09-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | synerise |

## Links

- npm: https://www.npmjs.com/package/@synerise/ds-divider
- Repository: Synerise/synerise-design
- npm.io page: https://npm.io/package/@synerise/ds-divider

## Recent versions

- 2.0.5 (latest) — 2026-09-22
- 2.0.4 — 2026-09-18
- 2.0.3 — 2026-09-16
- 2.0.2 — 2026-09-08
- 2.0.1 — 2026-09-02
- 2.0.0 — 2026-08-26
- 1.3.18 — 2026-08-18
- 1.3.17 — 2026-08-11
- 1.3.16 — 2026-07-23
- 1.3.15 — 2026-06-17
- 1.3.14 — 2026-06-11
- 1.3.13 — 2026-05-26
- 1.3.12 — 2026-05-22
- 1.3.11 — 2026-05-13
- 1.3.10 — 2026-05-04
- … 242 more at https://npm.io/package/@synerise/ds-divider/versions

## README

---
id: divider
title: Divider
---

Divider UI Component

## Usage

```
import Divider from '@synerise/ds-divider';

<div>
  <span>Before Divider</span>
     <Divider dashed />
  <span>After Divider</span>
</div>
```

## Demo

<iframe src="/storybook-static/iframe.html?id=components-divider--default"></iframe>

## API

| Property     | Description                      | Type                      | Default    |
| ------------ | -------------------------------- | ------------------------- | ---------- |
| marginTop    | Value for top margin             | number                    | 0          |
| marginBottom | Value for bottom margin          | number                    | 0          |
| labelAbove   | Label to display above divider   | ReactNode                 |            |
| labelBelow   | Label to display below divider   | ReactNode                 |            |
| className     | ClassName of container                            | string                    | -          |
| dashed        | Whether line is dashed                            | boolean                   | `false`    |
| style         | Style object of container                         | React.CSSProperties       | -          |
| type          | Direction type of divider                         | enum: horizontal vertical | horizontal |
| hiddenLine    | Show only labels, hide the line                   | boolean                   | `false`    |
| withSideMargin | Add 12px left/right margin to horizontal dividers | boolean                   | -          |

---
_Source: https://npm.io/package/@synerise/ds-divider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._