---
title: Separator
description: A visual divider between content sections.
links:
  doc: https://base-ui.com/react/components/separator
  api: https://base-ui.com/react/components/separator#api-reference
---

```tsx
'use client';

import { Separator } from '@/components/ui/separator';

export function SeparatorDefault() {
  return (
    <div className='w-64'>
      <div className='space-y-1'>
        <h4 className='text-sm leading-none font-medium'>Fab UI</h4>
        <p className='text-sm text-muted-foreground'>
          An open-source UI component library.
        </p>
      </div>
      <Separator className='my-4' />
      <div className='flex h-5 items-center space-x-4 text-sm'>
        <div>Blog</div>
        <Separator orientation='vertical' />
        <div>Docs</div>
        <Separator orientation='vertical' />
        <div>Source</div>
      </div>
    </div>
  );
}
```

## Installation

```bash
npx shadcn@latest add @fab-ui/separator
```

**Install the following dependencies:**

```bash
npm install @base-ui/react
```

**Copy and paste the following code into your project.**

```tsx
'use client';

import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';

import { cn } from '@/lib/utils';

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

export { Separator };
```

**Update the import paths to match your project setup.**

## Usage

```tsx
import { Separator } from "@/components/ui/separator"
```

```tsx
<Separator />
<Separator orientation='vertical' />
```