Divider

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

Structure Changes

In v2, the component was named Divider:

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:

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