Separator

A thin horizontal or vertical line that separates content.

Above the line

Below the line

Usage

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

<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

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.

solid

dashed

dotted

double

gradient

wave

zigzag

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

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.

text-border (default)

text-border-strong

text-border-intense

text-primary

text-secondary

text-error

text-success

text-warning

text-info

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

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).

Profile

Settings

Sign out

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

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

Mia Carter

Product designer based in Lisbon.

248 posts

12.4k followers

312 following

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

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.

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.

الملف الشخصي

الإعدادات

تسجيل الخروج

API reference

Separator wraps Base UI's Separator and forwards ref and every remaining <div> attribute. It exposes data-orientation (horizontal / vertical) for styling.

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction of the line. Vertical separators stretch to their flex parent.
`variant`	`'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'gradient' \| 'wave' \| 'zigzag'`	`'solid'`	Line style. `gradient`, `wave`, `zigzag`, and `dotted` are decorative.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	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

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. The default text-border token is intentionally low-emphasis.
A separator is non-interactive and is skipped by keyboard navigation.

Actions & Inputs

Data Display

Decoration & Effects

Layout

Menus

Navigation

Overlays

Status & Feedback

Separator

Usage

Examples

Variants

Colors

Vertical orientation

In context

Mia Carter

RTL

API reference

Accessibility

Mia Carter