RadCN
Displayreadycomponentready

Separator

A decorative or semantic separator primitive with horizontal and vertical orientation support.

Importimport { Separator } from 'radcn/separator'
Preview

Live package example

Render the upstream Radix Primitives copy, horizontal rule, and Blog/Docs/Source row with vertical separators.

Separator Demo

Render the upstream Radix Primitives copy, horizontal rule, and Blog/Docs/Source row with vertical separators.

Preview

Radix Primitives

An open-source UI component library.

Blog
Docs
Source
import { Separator } from 'radcn/separator'

export function SeparatorDemo() {
  return (
    <div>
      <div class="space-y-1">
        <h4 class="text-sm leading-none font-medium">Radix Primitives</h4>
        <p class="text-sm text-muted-foreground">
          An open-source UI component library.
        </p>
      </div>
      <Separator class="my-4" style="margin:1rem 0;" />
      <div class="flex h-5 items-center space-x-4 text-sm" style="display:flex;height:1.25rem;align-items:center;gap:1rem;font-size:0.875rem;">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Separator } from 'radcn/separator'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Separator defaults to decorative mode for visual grouping, matching upstream decorative=true behavior.
  • The named demo uses decorative separators for the horizontal rule and the two vertical dividers.
  • Semantic separator behavior remains available with decorative={false}, which exposes role="separator" and aria-orientation.
  • Browser accessibility behavior is verified through roles and aria-orientation instead of React or Radix internals.

Customization

  • Separator exposes public data-radcn-separator hooks, data-orientation, orientation classes, and class/style customization.
  • className="my-4" maps to class plus explicit margin style evidence for the horizontal separator.
  • The upstream flex h-5 items-center space-x-4 text-sm row layout maps to class plus explicit display, height, alignment, gap, and font-size styles.
  • Horizontal and vertical sizing map to package CSS over .radcn-separator--horizontal and .radcn-separator--vertical with --radcn-border token color.

Remix 3 Notes

  • use client, React component props, and Radix Separator primitive map to dependency-free server-rendered RadCN markup.
  • SeparatorPrimitive.Root maps to a div with data-radcn-separator and data-orientation.
  • className maps to class, cn maps to explicit class composition, and data-slot maps to public data-radcn-separator plus data-orientation hooks.
  • Tailwind my-4, flex, h-5, items-center, space-x-4, text-sm, bg-border, shrink-0, h-px, w-full, h-full, and w-px utilities map to package CSS, classes, style, CSS variables, and app-owned CSS.
  • decorative={true} maps to role="none"; semantic decorative={false} maps to role="separator" with aria-orientation.
  • Vendor source remains read-only evidence and is not imported by RadCN.