# Contacts Directory block

> CRM Contacts Grid with Bulk Owner Assignment and Detail Sheet

Full-page contacts directory for sales teams. Sort and filter rows, multi-select for bulk owner assignment or add-to-list, open a contact detail sheet. ReUI DataGrid, Filters, Frame, Badge; shadcn Button, Avatar, Sheet, Select. CRM, leads, accounts.

- Type: Pro block
- Category: [CRM](https://web.dev.reui.io/blocks/solutions/crm.md)
- Page: https://web.dev.reui.io/blocks/solutions/crm/solution-crm-3
- MCP: `get_block("solution-crm-3")`
- Built with: Alert Dialog, Avatar, Badge, Button, Data Grid, Dropdown Menu, Filters, Frame, Item, Scroll Area, Select, Separator, Sheet, Skeleton, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A people directory with Lead to Customer lifecycle badges, bulk owner assignment, an add to list action and a contact sheet

## Agent notes

- `handleAssignOwner` and `handleAddToList` only clear `rowSelection` and show a toast; no contact's `owner` changes and no list is written
- `handleRowAction` turns delete and email into toasts and the Add contact button is a toast too, so no row is removed or created
- `simulateAsyncFiltering` waits 400 ms in a `setTimeout`, then filters the sample `CONTACTS` locally; replace it with your API call

## When not to use

- Workspace members managed by role and sign-in status, not sales contacts: use [Member Directory](https://web.dev.reui.io/blocks/solutions/users/solution-users-1.md) (`get_block("solution-users-1")`)
- A leads table scored by color bars with trend sparklines and pinned rows: use [Lead Scoring Contacts](https://web.dev.reui.io/blocks/data-grid/base/data-grid-base-2.md) (`get_block("data-grid-base-2")`)

## Third-party libraries

- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/solution-crm-3
```

## About CRM blocks

### When to use

- A sales team's deal work: a pipeline board, a deal grid, a forecast call or the record of one deal
- The contact side of sales: a contacts directory, an activity log across accounts and a CSV import
- A sales overview of open pipeline, weighted forecast and win rate above the open deals

### When not to use

- Cards for tasks or tickets moved across columns, with no deal value or close date: use the [Kanban Board blocks](https://web.dev.reui.io/blocks/application/kanban-board.md)
- A records table with sorting, paging and row selection, outside a sales context: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- A side panel for one record that is not a deal, such as an order or a user: use the [Sheet blocks](https://web.dev.reui.io/blocks/application/sheet.md)

### Agent notes

- Each block sizes its page with `min-h-svh`, or `h-svh` on the Deal Desk, in page.tsx or its root component; size it from your app shell instead
- Every change lives in `useState` or a `useReducer` store and resets on reload; no block calls an API or writes to storage

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