Developers end up using raw <hr> tags, custom divs with border styles, or repeated Tailwind classes scattered across applications. These ad-hoc separators don't establish a consistent visual language, don't adapt to theme changes (e.g., dark mode), and lose semantic meaning for accessibility tools. Without a primitive, every layout that groups related content wastes time on styling and creates maintenance burden when design tokens shift.

Separator is a lightweight, semantic component that renders as an <hr>, a vertical divider, or a horizontal line with centered label text depending on the orientation prop. It accepts orientation ("horizontal" | "vertical"), an optional label string for labeled dividers, and className for customization. The component sets role="separator" and aria-orientation attributes, uses stable data-react-fancy-separator="" attributes for targeting, and applies Tailwind-based zinc-200/700 border tokens automatically.

Import from @particle-academy/react-fancy, render <Separator orientation="horizontal" /> for a basic divider or <Separator orientation="vertical" /> for inline vertical splits. Add label="Or" to show centered text between two lines. The stable selector [data-react-fancy-separator] lets agents query divider presence directly, and the semantic role="separator" attribute ensures screen readers and presence layers respect it.