# Divider · HeroUI

> Migration guide for Divider (renamed to Separator) from HeroUI v2 to v3

- Page: https://jiguang132.com/systems/heroui/docs/migration/divider
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

> 
  Refer to the [v3 Separator documentation](/systems/heroui/docs/components/separator) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.


## 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


  

#### v2


    ```tsx
    {/* v2 has no variant prop */}
    <Divider />
    ```
  
  

#### v3


    ```tsx
    <Separator />
    <Separator variant="secondary" />
    <Separator variant="tertiary" />
    ```
  


## 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 `` with ``
3. **Same Props**: `orientation` and `className` work the same
4. **Optional**: Use `variant="secondary"` or `variant="tertiary"` for different emphasis

---

Index of all JGuang resources: https://jiguang132.com/llms.txt