# CRM contacts

> Contacts on the data table with filters, expandable details, bulk email, tag and delete.

Block · Pro · https://lodeui.com/blocks/crm-contacts

## When to use

- Any record list people act on in bulk.

## When not to use

- Read-only lists.

## Installation

```bash
npx shadcn@latest add @lode/crm-contacts
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CrmContacts } from "@/components/blocks/crm-contacts";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <CrmContacts />
    </main>
  );
}
```

Built from: Avatar group, Badge, Data table, Toast

## API reference

### CrmContacts

Contacts on the data table with search, filters, expandable rows, bulk email, tag and delete with undo, and CSV export. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Move between rows |
| Space | Select a row |
| Enter | Expand a row |

## Accessibility

- Inherits the data table's labelled controls and aria-sort.

## Motion

- Rows expand smoothly; the bulk bar slides up.

## Responsive behavior

- Rows become cards below 640px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Move bulk actions to server actions and keep the toast with undo.

## Related

- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.
- [CRM pipeline](https://lodeui.com/blocks/crm-pipeline) — Drag deals across stages; open, weighted forecast and won totals update live.
- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.