Separator

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download separator -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Separator } from "@/components/ui/separator";
<div style={{ width: 320, height: 160 }}>
  <Separator orientation="horizontal" align="center" noPadding={false} />
</div>;

Examples

Default

import { Separator } from "@/components/ui/separator";
<div className="w-[420px] space-y-4">
  <div className="space-y-1">
    <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
    <p className="text-sm text-neutral-mid">
      An open-source UI component library.
    </p>
  </div>
  <Separator noPadding />
  <div className="flex h-5 items-center gap-4 text-sm">
    <div>Blog</div>
    <Separator orientation="vertical" noPadding />
    <div>Docs</div>
    <Separator orientation="vertical" noPadding />
    <div>Source</div>
  </div>
</div>;

With Text

import { Separator } from "@/components/ui/separator";
<div className="flex h-[200px] w-[400px] items-center justify-center">
  <Separator orientation="horizontal" align="center" noPadding={false} decorative>Section</Separator>
</div>;

Vertical

import { Separator } from "@/components/ui/separator";
<div className="flex h-[200px] w-[400px] items-center justify-center">
  <Separator orientation="vertical" align="center" noPadding={false} decorative>Section</Separator>
</div>;

Custom

import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
<div className="flex h-[200px] w-[400px] items-center justify-center">
  <Separator orientation="horizontal" align="center" noPadding={false} decorative>
    <Badge variant="secondary">Section with badge</Badge>
  </Separator>
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.