Divider

Name: Divider
Author: reaviz

ASecurity

Visual separator line. Renders as `<hr>`. Supports horizontal/vertical orientation and variant colors.

4 stars
0 votes
0 copies
4 views
Added May 27, 2026

data-aitypescript

Security analysis

A100/100

Scanned May 27, 2026

npx -y skills add reaviz/skills --skill divider --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Divider?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/reaviz-divider/badge)](https://www.skillsdirectory.com/skills/reaviz-divider)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

# Divider

Visual separator line. Renders as `<hr>`. Supports horizontal/vertical orientation and variant colors.

## Import

```tsx
import { Divider } from 'reablocks';
```

## Divider Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Divider direction |
| `variant` | `'primary' \| 'secondary'` | `'primary'` | Color variant |
| `disableMargins` | `boolean` | `false` | Remove default margins |
| `className` | `string` | — | Additional CSS classes |
| `style` | `CSSProperties` | — | Inline styles |
| `theme` | `DividerTheme` | — | Per-instance theme override |

## Basic Usage

```tsx
<Divider />
```

## Vertical

```tsx
<div className="flex h-16 items-center gap-4">
  <span>Left</span>
  <Divider orientation="vertical" />
  <span>Right</span>
</div>
```

## Variants

```tsx
<Divider variant="primary" />   {/* Solid bg-surface */}
<Divider variant="secondary" /> {/* Gradient via-blue-500 */}
```

## DividerTheme Interface

```typescript
interface DividerTheme {
  base: string;           // Base (border-none)
  orientation: {
    horizontal: string;   // h-px, w-full, my-2.5
    vertical: string;     // w-px, h-full, mx-2.5
  };
  variant: {
    primary: string;      // Solid color
    secondary: string;    // Gradient
  };
  disableMargins: string; // No margins
}
```