Separator

Separator creates spacing rhythm and visual grouping between adjacent content.

When to use

• Divide sections of related text, form groups, or metadata rows.
• Separate inline items using a vertical divider.
• Improve scanning in dense interfaces without adding heavy chrome.

Behavior notes

• orientation='horizontal' renders a full-width line.
• orientation='vertical' renders a 1px divider that matches parent height.
• Set decorative={false} when the separator conveys meaningful structure.

Example

<div className='space-y-4'>
  <div>Account</div>
  <Separator />
  <div className='flex h-5 items-center gap-3'>
    <span>Docs</span>
    <Separator orientation='vertical' />
    <span>Components</span>
  </div>
</div>

Preview

Usage

import { Separator } from '@branditdev/ui';

export function SeparatorDemo() {
  return (
    <div className='flex flex-col gap-4'>
      <div className='space-y-1'>
        <h4 className='text-sm leading-none font-medium'>Marketfuel UI</h4>
        <p className='text-muted-foreground text-sm'>
          Reusable building blocks.
        </p>
      </div>

      <Separator />

      <div className='flex h-5 items-center gap-3 text-sm'>
        <span>Docs</span>
        <Separator orientation='vertical' />
        <span>Components</span>
        <Separator orientation='vertical' />
        <span>Hooks</span>
      </div>
    </div>
  );
}

API

Separator(__namedParameters): Element

Defined in: components/separator/separator.tsx:20

Visual divider used to separate related content areas.

Supports horizontal and vertical orientations while preserving accessibility semantics from Radix when decorative is set to false.

Parameters

Returns

Element

Source

'use client';

import { Separator as SeparatorPrimitive } from 'radix-ui';
import * as React from 'react';

import { cn } from '@branditdev/ui';

export type SeparatorProps = React.ComponentProps<
  typeof SeparatorPrimitive.Root
>;

function Separator({
  className,
  orientation = 'horizontal',
  decorative = true,
  ...props
}: SeparatorProps) {
  return (
    <SeparatorPrimitive.Root
      data-slot='separator'
      decorative={decorative}
      orientation={orientation}
      className={cn(
        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
        className
      )}
      {...props}
    />
  );
}

export { Separator };