Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

Activity Feed Web3 Block for React Aria

A protocol activity feed with type chips, twelve events with short addresses and a time, and a Show 3 new events button that adds a typed buffer to the top on request.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Follow what is happening on a protocol without a feed that jumps under your pointer, with this activity feed for React with React Aria. It's Tracegrove, a protocol activity page, and every event is a typed sample, not a live stream. A Segment Group filters by type: All, Transfers, Swaps, Mints and Receives. Twelve events sit in a scroll region that keeps its height, each with an action icon, one sentence with short addresses in mono type, an amount and a time such as at 14:08 UTC. Three newer events wait in a typed buffer behind a Button that says Show 3 new events; pressing it adds them to the top, marked new, and the line below counts them. A type with nothing yet, Mints at first, shows an Empty state in the same space. For explorers, dashboards and protocol pages.

FAQ

What is the buffer of new events?

A typed list in BUFFER, newest first. The page tells you how many are waiting instead of inserting them, so the list never moves by itself and a row never slides away as you reach for it. Pressing the button adds them once, and the button then reads No new events. In a real feed this is where you hold socket messages until the user asks.

Why is Mints empty at first?

All three types in the first twelve events have rows, but no mint happened yet; the only mint is in the buffer. Choosing Mints shows the empty state, which says new events are waiting, and after Show 3 new events the same chip shows one row. It keeps the height of the list either way.

What stays local, and how do I wire it?

All of it. Nothing is streamed and no chain is read: events and the buffer are typed constants and the filter is local state. In your app subscribe to your indexer or a socket, collect messages in a buffer, and keep the same rule: show a count and add rows on request.

Is it accessible from the keyboard?

Yes. The chips are a radio-style Segment Group, the button is a real button, and the list is a named, focusable region. One polite status message says how many events show and how many are waiting, and it does not repeat as the time passes because nothing ticks.

How does it look on a phone?

The chips wrap to two rows, the button stays beside the list heading, and each event keeps its icon, its sentence and its amount; the sentence wraps instead of being cut.

All 100 web3 blocks