# Separator (/docs/components/separator)



<ComponentPreview name="separator-demo" />

## Overview [#overview]

Use Separator to divide related content or controls.

Separators are useful in menus, toolbars, cards, settings pages, and layouts where a visual break makes scanning easier.

## Anatomy [#anatomy]

A separator is a horizontal or vertical line. It can be decorative or semantic depending on how it is used.

## Usage guidance [#usage-guidance]

Use separators sparingly. Spacing and headings should do most of the grouping work. Add a separator when the visual boundary improves clarity.

## Accessibility [#accessibility]

If the separator communicates structure, keep it accessible. If it is only decorative, hide it from assistive technology.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add separator
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

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

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="separator" title="components/ui/separator.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

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

```tsx
<Separator />
```