---
title: Divider
description: Migration guide for Divider (renamed to Separator) from HeroUI v2 to v3
---

<Callout type="info">
  Refer to the [v3 Separator documentation](/docs/react/components/separator) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.
</Callout>

## Component Rename

**v2:** `Divider`  
**v3:** `Separator`

## Key Changes

### 1. Component Name

**v2:** `Divider`  
**v3:** `Separator`

### 2. Variant Prop

**v3:** Separator has a `variant` prop: `default`, `secondary`, `tertiary` for different emphasis levels (v2 Divider had no variant).

### 3. Props Comparison

| Prop | v2 | v3 | Notes |
|------|----|----|-------|
| `orientation` | ✅ | ✅ | Same: `"horizontal"` \| `"vertical"` |
| `className` | ✅ | ✅ | Same |
| `variant` | ❌ | ✅ | New: `"default"` \| `"secondary"` \| `"tertiary"` |

## Structure Changes

In v2, the component was named `Divider`:

```tsx
import { Divider } from "@heroui/react";

export default function App() {
  return (
    <div>
      <p>Content above</p>
      <Divider />
      <p>Content below</p>
    </div>
  );
}
```

In v3, the component has been renamed to `Separator`:

```tsx
import { Separator } from "@heroui/react";

export default function App() {
  return (
    <div>
      <p>Content above</p>
      <Separator />
      <p>Content below</p>
    </div>
  );
}
```

## Migration Examples

### With Variant

<Tabs items={["v2", "v3"]}>
  <Tab value="v2">
    ```tsx
    {/* v2 has no variant prop */}
    <Divider />
    ```
  </Tab>
  <Tab value="v3">
    ```tsx
    <Separator />
    <Separator variant="secondary" />
    <Separator variant="tertiary" />
    ```
  </Tab>
</Tabs>

## Summary

1. **Component Renamed**: `Divider` → `Separator`
2. **Import Change**: Update import from `Divider` to `Separator`
3. **New in v3**: `variant` prop (`default`, `secondary`, `tertiary`) for emphasis levels

## Migration Steps

1. **Update Import**: Change `import { Divider }` to `import { Separator }`
2. **Update Component**: Replace all `<Divider />` with `<Separator />`
3. **Same Props**: `orientation` and `className` work the same
4. **Optional**: Use `variant="secondary"` or `variant="tertiary"` for different emphasis
