# List Standard 1 - Draggable status list

> Vertical list with a single status group and draggable items.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/list-list-standard-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/list-list-standard-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/list-list-standard-1-light-bac8728842820081.png
- Registry item: https://shadcnblocks.com/r/list-list-standard-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/list-list-standard-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@dnd-kit/core`
- Registry items: `https://www.kibo-ui.com/r/list.json`

## Files

### `example/list/list-standard-1.tsx`

```tsx
"use client";

import type { DragEndEvent } from "@dnd-kit/core";
import * as React from "react";

import {
  ListGroup,
  ListHeader,
  ListItem,
  ListItems,
  ListProvider,
} from "@/components/kibo-ui/list";

export const title = "Draggable status list";

type Item = { id: string; name: string; parent: string };

const Example = () => {
  const [items, setItems] = React.useState<Item[]>([
    { id: "1", name: "Draft homepage", parent: "todo" },
    { id: "2", name: "Review pricing", parent: "todo" },
    { id: "3", name: "Update changelog", parent: "todo" },
  ]);

  const onDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;

    setItems((current) => {
      const oldIndex = current.findIndex((item) => item.id === active.id);
      const newIndex = current.findIndex((item) => item.id === over.id);
      if (oldIndex < 0 || newIndex < 0) return current;
      const next = [...current];
      const [moved] = next.splice(oldIndex, 1);
      next.splice(newIndex, 0, moved);
      return next;
    });
  };

  return (
    <ListProvider className="w-full max-w-md" onDragEnd={onDragEnd}>
      <ListGroup id="todo">
        <ListHeader color="var(--chart-1)" name="Todo" />
        <ListItems>
          {items.map((item, index) => (
            <ListItem
              key={item.id}
              id={item.id}
              index={index}
              name={item.name}
              parent={item.parent}
            />
          ))}
        </ListItems>
      </ListGroup>
    </ListProvider>
  );
};

export default Example;
```