shadcn.io is not affiliated with official shadcn/ui
Activity Feed CRUD Block for React
A small team's daily log with a composer where Enter posts and Shift+Enter breaks the line, where only your own entries show Edit and Delete, and a deleted entry leaves an Undo in its place.
Installation
Overview
Give a small team a shared notebook for the day with this activity feed for React with Base UI. A hairline frame with a plus mark on each corner holds the date and an entry count, a frame of fixed height that scrolls inside itself and opens on the newest entry, and a composer that closes the panel. Each entry shows initials, a name, a fixed time and its text. The composer is a Textarea: Enter posts, Shift+Enter breaks the line, and the new entry takes the next time and scrolls into view while focus stays in the field. Only your own entries change. They show Edit, which turns the entry into a field in place (Enter saves, Escape cancels, and the saved entry carries the word "edited"), and Delete, which leaves "Deleted your 9:41 entry. Undo" where the entry was. Other people's entries show no actions and say nothing about it. Post is the only Shine Button, the frame is ruled by Guides, and a refused empty post keeps its reason under the field without moving anything. For team logs, shift notes, handover feeds and any list where people may change only what they wrote.
FAQ
How do I fill it with my team's entries?
Edit ENTRIES. Each has an id, who, a two-letter tile, a minutes value since midnight, the text, a mine flag and the edited and gone flags. Only entries with mine set show Edit and Delete. Times are fixed numbers formatted as "9:41", never the clock, and new posts take the next twelve-minute step, so a reload repeats the same day.
What do Enter, Shift+Enter and Escape do?
In the composer Enter posts and Shift+Enter starts a new line; an sr-only hint tells screen reader users the same. In an entry you are editing Enter saves, Shift+Enter breaks the line and Escape puts the old text back. An empty or over-long entry is refused with its reason in a slot that is always there, so the list does not move.
What happens to a deleted entry?
It stays in its place as a quiet line, "Deleted your 9:41 entry", with its own Undo, so nothing jumps and the Undo cannot be missed. Several deletions each keep their own Undo, nothing times out, and the count in the heading follows the entries that are not deleted.
Why do other people's entries have no buttons?
Because they are not yours to change, and a disabled button on every row would add noise without helping anyone. The mine flag decides, and the demo marks the three entries written by You with a filled tile. In your app derive it from the signed-in user, and enforce it on the server too.
What stays local, and how do I wire it to a real API?
Entries live in React state in this tab; a reload brings the original seven back and nothing is sent. In your app call your API in post, save, remove and restore, append the saved entry the server returns, and show a server refusal in the same reason slot. Read the real time from the server instead of the fixed step.