Realtime list

A live demo against a mocked server in your browser — the block is the registry's own source.

Install

npx shadcn add @mantle/realtime-list

Needs a React Aria shadcn project and the @mantle registry in components.json — see Install. The block lands in components/mantle/realtime-list.tsx, yours to edit.

Usage

The client needs a socket (mantle({ url, socket: {} })) and the server a Socket.IO publisher for the service.

import { RealtimeList } from "@/components/mantle/realtime-list";

<RealtimeList<Message>
  service="messages"
  aria-label="Messages"
  query={{ $sort: { createdAt: "desc" }, $limit: 50 }}
  insert="start"
  renderItem={(message) => message.text}
/>;

• Built on React Aria GridList — arrow-key navigation, typeahead, and an onAction for opening an item.
• Uses @mantlejs/react’s useFind with realtime: { mode: "patch" }, which writes each event into the cached page instead of invalidating and refetching.
• matches mirrors your query’s filter client-side, so a patched record that no longer matches leaves the list.

View the source.