# Chat List Item

Inbox conversation row where unread chats are highlighted and new messages update the preview in place. Covers mentions, muted, pinned, drafts, typing, read receipts and an edit mode.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/chat-list-item
```

## Import

```tsx
import { ChatListItem } from "@/components/ui/chat-list-item/chat-list-item";
```

## Variants

- `channels` — Team channels: `npx @lumioui/cli add pro/chat-list-item-channels`
- `inbox` — Messages inbox: `npx @lumioui/cli add pro/chat-list-item-inbox`
- `select` — Marketplace edit mode: `npx @lumioui/cli add pro/chat-list-item-select`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Contact, group or channel name. |
| `avatar?` | `ImageSourcePropType` | Avatar image. Ignored when `leading` is set. |
| `fallback?` | `string` | Initials for the avatar fallback. |
| `leading?` | `React.ReactNode` | Custom leading node (channel tile, StoryRing, group stack). |
| `presence?` | `"online" | "away" | "busy" | "offline"` | Presence dot on the avatar. |
| `message?` | `string` | Last-message preview. |
| `sender?` | `string` | Prefix for the preview ("You", "Maya") — group chats and own messages. |
| `messageIcon?` | `IconName` | Glyph before the preview (photo, voice note, file). |
| `previewLines?` | `1 | 2` | Preview line count. Default 1 (2 for a roomier inbox). |
| `time?` | `string` | Timestamp — "9:41 AM", "Tue", "12/03". |
| `unreadCount?` | `number` | Unread messages. 0 / undefined hides the badge. |
| `unread?` | `boolean` | Marked unread without a count — shows a dot. |
| `mentioned?` | `boolean` | Someone mentioned the viewer — adds an "@" badge. |
| `muted?` | `boolean` | Notifications muted — bell-off glyph, grey unread badge. |
| `pinned?` | `boolean` | Pinned to the top — pin glyph when there is nothing unread. |
| `typing?` | `boolean | string` | Typing now. `true` shows "typing", a string replaces it ("Maya is typing"). |
| `delivery?` | `ChatDelivery` | Receipt for the viewer's own last message. |
| `draft?` | `string` | Unsent draft — replaces the preview with "Draft: …". |
| `verified?` | `boolean` | Verified badge after the title. |
| `trailing?` | `React.ReactNode` | Trailing node after the text column (listing thumbnail, call button). |
| `variant?` | `"default" | "compact"` | default 76pt two-line row · compact 52pt single line (channels). |
| `selectionMode?` | `boolean` | Edit mode — a check circle slides in and the row toggles selection. |
| `selected?` | `boolean` | Selected in edit mode. |
| `onSelectedChange?` | `(selected: boolean) => void` | Toggle handler for edit mode. |
| `separator?` | `boolean` | Hairline under the row, inset to the text column. |
| `className?` | `string` | — |

## Icons rendered

- `pin` — /icons.html?i=pin
- `check-circle` — /icons.html?i=check-circle
- `check` — /icons.html?i=check
- `clock` — /icons.html?i=clock

Source: https://lumioui.com/components/chat-list-item