Chat List View
Thread list rows for chat sidebars and conversation pickers.
Usage
Product launch planningCan you help me draft a launch checklist?
Customer feedback reviewSummarize the customer feedback from last week.
Copy editing helpRewrite this paragraph to sound more concise.
"use client";
import { Comment01Icon } from "@thenamespace/uikit/icons";
import { HugeiconsIcon } from "@thenamespace/uikit/icons";
import { ChatListView } from "@thenamespace/uikit";Use ChatListView to render recent conversations or saved threads.
Compact
Product launch planningCan you help me draft a launch checklist?
Customer feedback reviewSummarize the customer feedback from last week.
Copy editing helpRewrite this paragraph to sound more concise.
"use client";
import { Comment01Icon } from "@thenamespace/uikit/icons";
import { HugeiconsIcon } from "@thenamespace/uikit/icons";
import { ChatListView } from "@thenamespace/uikit";Use the compact variant for dense sidebars.
Anatomy
import { ChatListView } from "@thenamespace/uikit";
<ChatListView>
<ChatListView.Item>
<ChatListView.Icon />
<ChatListView.ItemContent>
<ChatListView.Title>Project planning</ChatListView.Title>
<ChatListView.Preview>Last assistant reply preview</ChatListView.Preview>
</ChatListView.ItemContent>
</ChatListView.Item>
</ChatListView>;CSS Classes
.chat-list-view- Root list.chat-list-view__item- Thread row.chat-list-view__icon- Leading icon/avatar.chat-list-view__item-content- Row text content.chat-list-view__title- Thread title.chat-list-view__preview- Thread preview.chat-list-view__meta- Optional metadata
API Reference
ChatListView
Root list container. Supports native div props.
ChatListView.Item
Thread row. Supports native button/link composition depending on usage.
ChatListView.Icon
Leading icon slot.
ChatListView.ItemContent
Text content wrapper.
ChatListView.Title
Thread title slot.
ChatListView.Preview
Thread description or last-message preview slot.
ChatListView.Meta
Optional metadata slot, such as date or unread counts.