Skip to main content


Streamlined Chat List Integration: Easily Add a Message List to Your Dapp with Built-in Pagination

This component streamlines the process of displaying a paginated list of messages within your user interface. All you need to do is provide a chat ID, and the component handles the rest, presenting you with a comprehensive view of all messages. Additionally, it conveniently includes chat meta information at the top of the component for a complete chat experience.


import { useContext } from "react";
import styled from "styled-components";
import { ChatViewList } from "@pushprotocol/uiweb";

const ChatViewListTest = () => {
return (

export default ChatViewListTest;

const ChatViewListCard = styled.div`
height: 40vh;
background: black;
overflow: auto;
overflow-x: hidden;

Customization parameters

chatIdstring-Chat id for a particular chat
limitnumber-Number of messages fetched in each paginated api call,default value is 10
chatFilterListArray<string>-Array of cid's of messages that needs to be excluded from chatViewList

Note: Parameters in this style are mandatory.

Note: Refer ChatUIProvider for details on its paramters.

Live playground