@neo4j-ndl/react/skills/ndl-react/components/divider.md

React implementation of Neo4j Design System

# Divider

Import: `import { Divider } from '@neo4j-ndl/react'`

## Props

### Divider

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `orientation` | `'horizontal' \| 'vertical'` |  | `horizontal` |  |
| `ref` | `any` |  |  | A ref to apply to the root element. |

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Divider } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '4px',
        width: '100%',
      }}
    >
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <Divider />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  );
};

export default Component;
```

### Horizontal

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Divider } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '4px',
        width: '100%',
      }}
    >
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <Divider orientation="horizontal" />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  );
};

export default Component;
```

### Vertical

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Divider } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'row',
        gap: '4px',
        width: '100%',
      }}
    >
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <Divider orientation="vertical" />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  );
};

export default Component;
```