Reorder List

A customizable reorder list component for shadcn/ui. Easily create draggable and reorderable lists with drag-and-drop functionality using Framer Motion.

Default

Reorder List Item 1
Reorder List Item 2
Reorder List Item 3
Reorder List Item 4
Reorder List Item 5

With Drag Handle

Reorder List Item 1
Reorder List Item 2
Reorder List Item 3
Reorder List Item 4
Reorder List Item 5

"use client";
import type React from "react";

import { TrashIcon } from "lucide-react";

import { ReorderList } from "@/components/reorder-list";
import { Button } from "@/components/ui/button";
import {
    Item,
    ItemActions,
    ItemContent,
    ItemTitle,
} from "@/components/ui/item";

const ReorderListDemo: React.FC = () => {
    const handleReorderFinish = (newOrder: React.ReactElement[]) => {
        console.log(newOrder);
    };

    return (
        <div className="flex items-start justify-center gap-16">
            <div className="">
                <h2 className="text-2xl text-muted-foreground font-bold mb-4">
                    Default
                </h2>

                <ReorderList
                    onReorderFinish={handleReorderFinish}
                    itemClassName="rounded-lg"
                >
                    <Item variant={"outline"} size={"sm"}>
                        <ItemContent>
                            <ItemTitle>Reorder List Item 1</ItemTitle>
                        </ItemContent>
                    </Item>
                    <Item variant={"outline"} size={"sm"}>
                        <ItemContent>
                            <ItemTitle>Reorder List Item 2</ItemTitle>
                        </ItemContent>
                    </Item>
                    <Item variant={"outline"} size={"sm"}>
                        <ItemContent>
                            <ItemTitle>Reorder List Item 3</ItemTitle>
                        </ItemContent>
                    </Item>
                    <Item variant={"outline"} size={"sm"}>
                        <ItemContent>
                            <ItemTitle>Reorder List Item 4</ItemTitle>
                        </ItemContent>
                    </Item>
                    <Item variant={"outline"} size={"sm"}>
                        <ItemContent>
                            <ItemTitle>Reorder List Item 5</ItemTitle>
                        </ItemContent>
                    </Item>
                </ReorderList>
            </div>

            <div>
                <h2 className="text-2xl text-muted-foreground font-bold mb-4">
                    With Drag Handle
                </h2>

                <ReorderList
                    onReorderFinish={handleReorderFinish}
                    withDragHandle
                    itemClassName="rounded-lg"
                >
                    <Item variant={"outline"} size={"sm"}>
                        <ItemContent>
                            <ItemTitle>Reorder List Item 1</ItemTitle>
                        </ItemContent>
                        <ItemActions>
                            <Button variant={"ghost"} size={"icon-sm"}>
                                <TrashIcon />
                            </Button>
                        </ItemActions>
                    </Item>
                    <Item variant={"outline"} size={"sm"}>
                        <ItemContent>
                            <ItemTitle>Reorder List Item 2</ItemTitle>
                        </ItemContent>
                        <ItemActions>
                            <Button variant={"ghost"} size={"icon-sm"}>
                                <TrashIcon />
                            </Button>
                        </ItemActions>
                    </Item>
                    <Item variant={"outline"} size={"sm"}>
                        <ItemContent>
                            <ItemTitle>Reorder List Item 3</ItemTitle>
                        </ItemContent>
                        <ItemActions>
                            <Button variant={"ghost"} size={"icon-sm"}>
                                <TrashIcon />
                            </Button>
                        </ItemActions>
                    </Item>
                    <Item variant={"outline"} size={"sm"}>
                        <ItemContent>
                            <ItemTitle>Reorder List Item 4</ItemTitle>
                        </ItemContent>
                        <ItemActions>
                            <Button variant={"ghost"} size={"icon-sm"}>
                                <TrashIcon />
                            </Button>
                        </ItemActions>
                    </Item>
                    <Item variant={"outline"} size={"sm"}>
                        <ItemContent>
                            <ItemTitle>Reorder List Item 5</ItemTitle>
                        </ItemContent>
                        <ItemActions>
                            <Button variant={"ghost"} size={"icon-sm"}>
                                <TrashIcon />
                            </Button>
                        </ItemActions>
                    </Item>
                </ReorderList>
            </div>
        </div>
    );
};

export default ReorderListDemo;

Installation

pnpm add shadcn@latest add @shadix-ui/reorder-list

Usage

Basic Usage

Import the component

import { ReorderList } from '@/registry/new-york/components/reorder-list';

Default Usage

<ReorderList>
    <Item variant={'outline'} size={'sm'}>
        <ItemContent>
            <ItemTitle>Reorder List Item 1</ItemTitle>
        </ItemContent>
    </Item>
    <Item variant={'outline'} size={'sm'}>
        <ItemContent>
            <ItemTitle>Reorder List Item 2</ItemTitle>
        </ItemContent>
    </Item>
    <Item variant={'outline'} size={'sm'}>
        <ItemContent>
            <ItemTitle>Reorder List Item 3</ItemTitle>
        </ItemContent>
    </Item>
</ReorderList>

With Drag Handle

<ReorderList withDragHandle>
    <Item variant={'outline'} size={'sm'}>
        <ItemContent>
            <ItemTitle>Reorder List Item 1</ItemTitle>
        </ItemContent>
    </Item>
    <Item variant={'outline'} size={'sm'}>
        <ItemContent>
            <ItemTitle>Reorder List Item 2</ItemTitle>
        </ItemContent>
    </Item>
    <Item variant={'outline'} size={'sm'}>
        <ItemContent>
            <ItemTitle>Reorder List Item 3</ItemTitle>
        </ItemContent>
    </Item>
</ReorderList>

Props

Prop

Type

Reorder List

Default

With Drag Handle

Installation

Usage

Basic Usage

Import the component

Default Usage

With Drag Handle

Props

On this page