shadcn.io is not affiliated with official shadcn/ui
Activity Log File Upload Block for Solid
An audit trail for a records team: a side cell of event kinds with counts and a person select beside a day-grouped timeline of uploads, renames, moves, shares, downloads and deletes, with Load 10 more.
Installation
Overview
Give a team an audit trail it can filter, with this activity log for Solid with Ark UI. It is the trail of Tracemark, a records team's document store. A side cell holds a Toggle Group of event kinds (All, Uploads, Renames, Moves, Shares, Downloads, Deletes), each with a count that follows the person you pick in a Native Select, and a Clear filters button. Beside it, a timeline grouped by day lists each event with an icon, what was done in words ("Renamed: q1.pdf to q1-final.pdf"), who did it and the time in UTC, and a Badge for the size or the bin. The list sits in a scroll region of fixed height, shows ten at a time and loads ten more on request, and a filter with no match shows an Empty state in the same box. The panel is ruled by Guides, and every day comes from one fixed date. For records teams, compliance screens and any store that must show who touched what.
FAQ
How do the filters work?
The kind and the person combine: pick Renames and Fenna Abara and you see her renames. The counts on the kinds re-derive from the person, so each chip tells you what you would get. The count line above the list says how many of how many are shown, and Clear filters resets both.
What does Load 10 more do?
The panel holds the whole typed trail and shows ten events at a time. The button shows the next ten of what matches and says how many are left. Changing a filter goes back to ten. In your app, fetch the next page from your API with a cursor instead.
Does the panel move when I filter?
No. The list is a scroll region of fixed height, and the empty state is placed in the same box, so the panel keeps its size whether ten events, one or none match. The region takes focus, so the arrow keys scroll it.
Where do the days and times come from?
From one typed as-of date, 16 Oct 2026. Day headings and the Today, Yesterday and N days ago labels are worked out from it, and times are shown in UTC, so nothing reads the clock or depends on the visitor's time zone.
How do I use it from the keyboard and a screen reader?
The kinds are a toggle group: Tab to it and move with the arrow keys. The person select is a native select with a visible label. The count line is a polite live region, so each filter change is read out, and the timeline is an ordered list with a heading for each day.