---
title: Reorder
description: "`Reorder` is a component that allows you to change the order of items using drag and drop."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/reorder/reorder.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/reorder
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-reorder--basic
---

```tsx
<Reorder.Root>
  <Reorder.Item value="虎杖悠仁">虎杖悠仁</Reorder.Item>
  <Reorder.Item value="伏黒恵">伏黒恵</Reorder.Item>
  <Reorder.Item value="釘崎野薔薇">釘崎野薔薇</Reorder.Item>
  <Reorder.Item value="五条悟">五条悟</Reorder.Item>
  <Reorder.Item value="七海建人">七海建人</Reorder.Item>
</Reorder.Root>
```

## Usage

```tsx
import { Reorder } from "@yamada-ui/react"
```

```tsx
import { Reorder } from "@/components/ui"
```

```tsx
import { Reorder } from "@workspaces/ui"
```

```tsx
<Reorder.Root>
  <Reorder.Item value="虎杖悠仁">虎杖悠仁</Reorder.Item>
  <Reorder.Item value="伏黒恵">伏黒恵</Reorder.Item>
  <Reorder.Item value="釘崎野薔薇">釘崎野薔薇</Reorder.Item>
</Reorder.Root>
```

### Use items

```tsx
const items = useMemo<Reorder.Item[]>(
  () => [
    { value: "虎杖悠仁", label: "虎杖悠仁" },
    { value: "伏黒恵", label: "伏黒恵" },
    { value: "釘崎野薔薇", label: "釘崎野薔薇" },
    { value: "五条悟", label: "五条悟" },
    { value: "七海建人", label: "七海建人" },
  ],
  [],
)

return <Reorder.Root items={items} />
```

### Change Variant

```tsx
const items = useMemo<Reorder.Item[]>(
  () => [
    { value: "虎杖悠仁", label: "虎杖悠仁" },
    { value: "伏黒恵", label: "伏黒恵" },
    { value: "釘崎野薔薇", label: "釘崎野薔薇" },
  ],
  [],
)

return (
  <VStack separator={<Separator />}>
    <Reorder.Root variant="panel" items={items} />
    <Reorder.Root variant="outline" items={items} />
    <Reorder.Root variant="solid" items={items} />
    <Reorder.Root variant="subtle" items={items} />
    <Reorder.Root variant="surface" items={items} />
    <Reorder.Root variant="elevated" items={items} />
    <Reorder.Root variant="plain" items={items} />
  </VStack>
)
```

### Change Size

```tsx
const items = useMemo<Reorder.Item[]>(
  () => [
    { value: "虎杖悠仁", label: "虎杖悠仁" },
    { value: "伏黒恵", label: "伏黒恵" },
    { value: "釘崎野薔薇", label: "釘崎野薔薇" },
  ],
  [],
)

return (
  <VStack separator={<Separator />}>
    <Reorder.Root size="sm" items={items} />
    <Reorder.Root size="md" items={items} />
    <Reorder.Root size="lg" items={items} />
    <Reorder.Root size="xl" items={items} />
  </VStack>
)
```

### Change Orientation

To change the orientation, set `orientation` to `"vertical"` or `"horizontal"`. By default, `"vertical"` is set.

```tsx
const items = useMemo<Reorder.Item[]>(
  () => [
    { value: "虎杖悠仁", label: "虎杖悠仁" },
    { value: "伏黒恵", label: "伏黒恵" },
    { value: "釘崎野薔薇", label: "釘崎野薔薇" },
    { value: "五条悟", label: "五条悟" },
  ],
  [],
)

return (
  <VStack separator={<Separator />}>
    <Reorder.Root orientation="vertical" items={items} />
    <Reorder.Root orientation="horizontal" items={items} />
  </VStack>
)
```

### Limit the Draggable Area

To limit the draggable area, use `ReorderTrigger`.

```tsx
<Reorder.Root>
  <Reorder.Item value="虎杖悠仁">
    <HStack>
      <Reorder.Trigger />
      <Text>虎杖悠仁</Text>
    </HStack>
  </Reorder.Item>

  <Reorder.Item value="伏黒恵">
    <HStack>
      <Reorder.Trigger>
        <GhostIcon />
      </Reorder.Trigger>
      <Text>伏黒恵</Text>
    </HStack>
  </Reorder.Item>

  <Reorder.Item value="釘崎野薔薇">
    <HStack>
      <Reorder.Trigger />
      <Text>釘崎野薔薇</Text>
    </HStack>
  </Reorder.Item>
</Reorder.Root>
```

### Handle Completion Events

If you want to handle the event when the user's drag and drop has finished and the order of items is completed, use `onCompleteChange`. `onCompleteChange` provides the completed order as an array.

```tsx
const items = useMemo<Reorder.Item[]>(
  () => [
    { value: "虎杖悠仁", label: "虎杖悠仁" },
    { value: "伏黒恵", label: "伏黒恵" },
    { value: "釘崎野薔薇", label: "釘崎野薔薇" },
    { value: "五条悟", label: "五条悟" },
  ],
  [],
)
const [completedOrder, setCompletedOrder] = useState([
  "虎杖悠仁",
  "伏黒恵",
  "釘崎野薔薇",
  "五条悟",
])

return (
  <VStack>
    <Text>Completed order: {completedOrder.join(", ")}</Text>
    <Reorder.Root
      items={items}
      onCompleteChange={(values) => setCompletedOrder(values)}
    />
  </VStack>
)
```

### Use in Scrollable Area

When using in an area with scroll, set `layoutScroll` to `true` to ensure items can measure their offsets correctly.

```tsx
const items = useMemo<Reorder.Item[]>(
  () => [
    { value: "虎杖悠仁", label: "虎杖悠仁" },
    { value: "伏黒恵", label: "伏黒恵" },
    { value: "釘崎野薔薇", label: "釘崎野薔薇" },
    { value: "五条悟", label: "五条悟" },
    { value: "七海建人", label: "七海建人" },
  ],
  [],
)

return (
  <VStack h="xs" overflowY="auto">
    <Reorder.Root layoutScroll items={items} />
  </VStack>
)
```

### Control

```tsx
const items = useMemo<Reorder.Item[]>(
  () => [
    { value: "虎杖悠仁", label: "虎杖悠仁" },
    { value: "伏黒恵", label: "伏黒恵" },
    { value: "釘崎野薔薇", label: "釘崎野薔薇" },
    { value: "五条悟", label: "五条悟" },
  ],
  [],
)
const [values, setValues] = useState([
  "虎杖悠仁",
  "伏黒恵",
  "釘崎野薔薇",
  "五条悟",
])

return (
  <VStack>
    <Text>Current order: {values.join(", ")}</Text>
    <Reorder.Root
      items={items}
      onChange={(newValues) => setValues(newValues)}
    />
  </VStack>
)
```

## Props

### Reorder.Root

| Prop               | Default      | Type                                                                                                                      | Description                                                           |
| ------------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `as`               | -            | `keyof IntrinsicElements`                                                                                                 | The HTML element to render.                                           |
| `asChild`          | -            | `boolean`                                                                                                                 | Merges its props onto its immediate child.                            |
| `css`              | -            | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                                       |
| `colorScheme`      | -            | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                           |
| `size`             | `"md"`       | `"lg" \| "md" \| "sm" \| "xl"`                                                                                            | The size of the component.                                            |
| `variant`          | `"panel"`    | `"elevated" \| "outline" \| "panel" \| "plain" \| "solid" \| "subtle" \| "surface" ...`                                   | The variant of the component.                                         |
| `items`            | -            | `ReorderItemProps<Y>[]`                                                                                                   | If provided, generate reorder items based on items.                   |
| `onChange`         | -            | `(values: Y[]) => void`                                                                                                   | The callback invoked when reorder items are moved.                    |
| `onCompleteChange` | -            | `(values: Y[]) => void`                                                                                                   | The callback invoked when the movement of reorder items is completed. |
| `orientation`      | `"vertical"` | `"horizontal" \| "vertical"`                                                                                              | The orientation of the reorder.                                       |

### Reorder.Item

| Prop          | Default | Type                                                                                                                                                         | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ |
| `as`          | -       | `keyof IntrinsicElements`                                                                                                                                    | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                                                    | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                                                   | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                    | Set color scheme variables.                |
| `label`       | -       | `string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` | The label of the reorder item.             |
| `value`       | -       | `NonNullable<Y>`                                                                                                                                             | The value of the reorder item.             |

### Reorder.Trigger

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |