# Shadcn Grid Layout

> Sortable list of items with grid layout

- Type: example, free and open source (MIT)
- Component: [Sortable](https://reui.io/components/sortable.md)
- Page: https://reui.io/components/sortable/c-sortable-2
- Docs (Base UI): https://reui.io/docs/components/base/sortable.md
- Docs (Radix UI): https://reui.io/docs/components/radix/sortable.md
- MCP: `get_example("c-sortable-2")`
- Registry item: https://reui.io/r/styles/base-nova/c-sortable-2.json
- Uses: Badge, Sortable

## Best for

Asset cards with a title, a one line description and a colored type badge in an equal height 3 column layout, grips shown on hover

## Agent notes

- `getItemSize` sets `col-span-2` on the card inside `SortableItem` rather than on the grid cell, so the featured card fills 1 cell like the rest
- Replace `defaultGridItems`; its `priority` field is never rendered

## When not to use

- A single column of rows in place of tiles spread across the width: use [File List](https://reui.io/components/sortable/c-sortable-1.md) (`get_example("c-sortable-1")`)

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/c-sortable-2
```

## About Shadcn Sortable

### When to use

- Ranked lists such as a play queue, notification channels or release tasks, put in order by a grip
- Tile grids such as a media library, where cards change places across rows and columns
- Grouped options and menus reordered in place, such as product variants or sidebar menu entries

### When not to use

- Cards that move between several status columns on one board: use [Kanban](https://reui.io/components/kanban.md) (`get_component("kanban")`)
- Ranked table rows that keep several columns of values lined up: use the [Drag & Drop blocks](https://reui.io/blocks/data-grid/drag-drop.md)
- A whole page layout of sidebar, top bar and content area around the list: use the [App Shell blocks](https://reui.io/blocks/application/app-shell.md)

### Agent notes

- Drag listeners sit on `SortableItemHandle` only, so a `SortableItem` rendered without one cannot be dragged
- Passing `onMove` skips the built-in reorder, so neither `onValueChange` nor `onValueCommit` fires on drop
- The drag preview clones the child of `Sortable` whose `value` matches the dragged item, so a wrapper around `SortableItem` needs that `value` too

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.