# Divider
**Category**: react
**URL**: https://www.heroui.com/docs/react/migration/divider
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/divider.mdx
> Migration guide for Divider (renamed to Separator) from HeroUI v2 to v3
***
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.
## 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 (
Content above
Content below
);
}
```
In v3, the component has been renamed to `Separator`:
```tsx
import { Separator } from "@heroui/react";
export default function App() {
return (
Content above
Content below
);
}
```
## Migration Examples
### With Variant
```tsx
{/* v2 has no variant prop */}
```
```tsx
```
## 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