# Separator (/ui/components/react/separator)



<Playground component="separator" />

## Usage [#usage]

```tsx
import { Separator } from '@appica/ui-react/separator'
```

```tsx
<Separator />
```

`Separator` draws a single line between sections of related content. It's `horizontal` by default —
a full-width rule — and becomes a vertical divider with `orientation="vertical"`, stretching to the
height of its flex parent. The `variant` prop swaps the line style, from a plain `solid` rule to
decorative `wave` and `zigzag` patterns.

It renders with `role="separator"` so assistive tech announces the boundary. When a separator is
purely cosmetic (the `gradient`, `wave`, `zigzag`, and `dotted` patterns are drawn as decoration),
pass nothing else — the component already keeps it out of the way of screen readers where appropriate.

## Examples [#examples]

### Variants [#variants]

Seven line styles cover everything from a crisp hairline to playful decorative patterns. `solid`,
`dashed`, `dotted`, `double`, and `gradient` are CSS borders; `wave` and `zigzag` are drawn as a
repeating SVG path that scales with the available width.

```tsx
import { Separator } from '@appica/ui-react/separator'

const variants = ['solid', 'dashed', 'dotted', 'double', 'gradient', 'wave', 'zigzag'] as const

export default function SeparatorVariants() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-5">
      {variants.map((variant) => (
        <div key={variant} className="flex flex-col gap-2">
          <span className="text-sm capitalize">{variant}</span>
          <Separator variant={variant} />
        </div>
      ))}
    </div>
  )
}
```

### Colors [#colors]

The line is drawn with `currentColor`, so its color follows the current text color — set any
`text-*` utility on the separator (or an ancestor) to recolor it. The default is the low-emphasis
`text-border` token; reach for the stronger `text-border-strong` / `text-border-intense` shades for
more contrast, or a semantic color like `text-primary`, `text-success`, or `text-error` to tie the
divider to its surrounding state.

```tsx
import { Separator } from '@appica/ui-react/separator'

const colors = [
  { label: 'text-border (default)', className: 'text-border' },
  { label: 'text-border-strong', className: 'text-border-strong' },
  { label: 'text-border-intense', className: 'text-border-intense' },
  { label: 'text-primary', className: 'text-primary' },
  { label: 'text-secondary', className: 'text-secondary' },
  { label: 'text-error', className: 'text-error' },
  { label: 'text-success', className: 'text-success' },
  { label: 'text-warning', className: 'text-warning' },
  { label: 'text-info', className: 'text-info' },
] as const

export default function SeparatorColors() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-5">
      {colors.map(({ label, className }) => (
        <div key={className} className="flex flex-col gap-2">
          <span className="text-sm">{label}</span>
          <Separator className={className} />
        </div>
      ))}
    </div>
  )
}
```

### Vertical orientation [#vertical-orientation]

Set `orientation="vertical"` to divide inline items like toolbar actions or breadcrumb-style links.
The separator stretches to match its flex row, so give the row a height (or let its content define
one).

```tsx
import { Separator } from '@appica/ui-react/separator'

export default function SeparatorOrientation() {
  return (
    <div className="text-foreground flex h-5 items-center gap-4 text-sm">
      <span>Profile</span>
      <Separator orientation="vertical" />
      <span>Settings</span>
      <Separator orientation="vertical" />
      <span>Sign out</span>
    </div>
  )
}
```

### In context [#in-context]

Separators work in both directions within the same block — a horizontal rule between stacked
sections, and vertical rules between inline stats.

```tsx
import { Separator } from '@appica/ui-react/separator'

export default function SeparatorInContent() {
  return (
    <div className="border-border w-full max-w-sm rounded-xl border p-5">
      <div className="flex flex-col gap-1">
        <h3 className="text-foreground-intense font-medium">Mia Carter</h3>
        <p className="text-foreground-muted text-sm">Product designer based in Lisbon.</p>
      </div>
      <Separator className="my-4" />
      <div className="flex justify-between text-sm">
        <div>
          <span className="font-semibold">248</span> posts
        </div>
        <Separator orientation="vertical" className="mx-2.5" />
        <div>
          <span className="font-semibold">12.4k</span> followers
        </div>
        <Separator orientation="vertical" className="mx-2.5" />
        <div>
          <span className="font-semibold">312</span> following
        </div>
      </div>
    </div>
  )
}
```

## RTL [#rtl]

Every Appica UI component supports right-to-left layouts out of the box. Set the `dir` attribute on a
container (commonly your `<html>` element) so CSS logical properties resolve correctly, and wrap your
tree in `DirectionProvider` so direction-aware behavior follows the same direction.

```tsx
import { DirectionProvider } from '@appica/ui-react/providers/direction-provider'

export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider dir="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}
```

A horizontal separator looks the same in either direction, but the items it sits between reorder to
follow the resolved direction, so vertical dividers land in the right place automatically. For setup
details and caveats, see the [RTL guide](/ui/docs/react/rtl).

<RtlPreview component="separator" />

## API reference [#api-reference]

`Separator` wraps [Base UI's Separator](https://base-ui.com/react/components/separator) and forwards `ref` and every remaining `<div>` attribute. It exposes `data-orientation` (`horizontal` / `vertical`) for styling.

| Prop          | <ColMinWidth width="200">Type</ColMinWidth>                                                  | Default        | <ColMinWidth width="220">Description</ColMinWidth>                            |
| ------------- | -------------------------------------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------- |
| `orientation` | <Code>'horizontal' \| 'vertical'</Code>                                                      | `'horizontal'` | Direction of the line. Vertical separators stretch to their flex parent.      |
| `variant`     | <Code>'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'gradient' \| 'wave' \| 'zigzag'</Code> | `'solid'`      | Line style. `gradient`, `wave`, `zigzag`, and `dotted` are decorative.        |
| `render`      | <Code>ReactElement \| ((props, state) => ReactElement)</Code>                                | —              | Replace the rendered element, or compose it with another component.           |
| `className`   | `string`                                                                                     | —              | Extra classes, merged via `tailwind-merge`. Set `text-*` to recolor the line. |
| `style`       | `CSSProperties`                                                                              | —              | Inline styles on the rendered element.                                        |

## Accessibility [#accessibility]

* Renders with `role="separator"` and an `aria-orientation` matching the `orientation` prop, so
  assistive tech announces the boundary between groups.
* Pick a color with enough contrast against its background for the divider to stay perceivable — see
  [Colors](#colors). The default `text-border` token is intentionally low-emphasis.
* A separator is non-interactive and is skipped by keyboard navigation.