shadcn.io is not affiliated with official shadcn/ui
Moderation Audit Log Comments Block for Ark UI
A read-only audit table of twelve moderation events with action filters and counts, a comment id search, rows that open to the text before and after, and a real CSV export of the rows shown.
Installation
Overview
Give a compliance team a record that cannot be edited, with this moderation audit log for React with Ark UI. A compact header says the log is read-only and holds the one primary, Export CSV with the number of rows it will contain. A hairline frame has a filter band and a table. The band has four action chips with counts, built as a multiple Toggle Group (Created, Edited, Flagged, Deleted; none pressed means all), and an Input for a comment id. The table lists twelve events in a held scroll region with time, who, action, comment id and note, and each row opens in place to the comment's text before and after. Filter to nothing and an Empty state offers to clear the filters. Export CSV builds a real file from the rows shown, in the page, and saves it. No control anywhere edits an event. It is built from Toggle Group, Input, Badge, Button, Shine Button, Empty and Guides, with a CSS entrance only. For compliance archives, moderation consoles and regulated teams.
FAQ
How do I use my own events?
Edit EVENTS: an id, an ISO at, who did it, the action (one of the four in ACTIONS), the comment id, a short note and the before and after text. The counts on the chips, the rows and the CSV are all built from that list.
What is in the CSV?
The rows currently shown, after the chips and the id field, with the columns Time (UTC), Who, Action, Comment and Note. Every cell is quoted and quotes inside are doubled, so a comma in a note cannot break a row. The file is built as a Blob in the page and saved with a download link; nothing is sent. With no rows the button refuses and says so.
How is it read-only?
There is no edit, delete or reorder control, and the header says so. In a real archive the guarantee has to live on the server: append events, never update them, and check the person can read the log. The disclosure rows only reveal text.
What stays local?
The events, the filters and which rows are open. To make it real, query events by action and comment id on the server, return the next page as the region scrolls, and generate the export there for large logs, since a browser file is fine for a page but not for a year of events.
Is it accessible?
The chips are a named group of toggle buttons with counts, the id field has a visible label, and the table has a caption and column heads. Each row's button says what it opens (Text of the deleted event on c-4907) and reports its state. Actions are words, not colours. On a phone the rows become cards but keep the same reading order.