shadcn.io is not affiliated with official shadcn/ui
Audit Log Carousel Block for Ark UI
Twenty-four admin audit events on four swipeable pages of six, each row with who, what, the resource, the address, the time and a risk level, paged by the catalog pagination and re-sorted newest or oldest first.
Installation
Overview
Page through an activity record without a table that grows forever, with this audit log carousel for React with Ark UI. Logbright, an admin audit trail for a docs workspace, keeps twenty-four events on four pages of six. Each page is a ledger: a person's initials and what they did ("Mira changed the retention policy"), the resource in monospace, the address it came from, the time in UTC and the risk as a word with three dots. The foot is the catalog Pagination, and it is the carousel's page control: pressing a number moves the track to that page, and swiping the track or pressing an arrow key moves the pagination, because both are one state. A Toggle Group in the header sorts newest or oldest first, re-sorts every page and returns to page 1, and the foot's live status says so. On a phone each event becomes a card whose columns fold into its first cell. It's built from Carousel, Pagination, Toggle Group, Avatar and Guides, with CSS transitions only. The people, resources, addresses and times are made up for the example.
FAQ
How do I load my own events?
Edit EVENTS, kept newest first. Each has an id, a person's name and initials, an action phrase that follows the name, a resource, an address, an ISO time in UTC and a risk of 1, 2 or 3. Pages are cut from the list six at a time, so the count of pages, the foot and the sort all follow its length; change ROWS and PAGE_IDS together for another page size. The addresses here are from the ranges reserved for documentation.
How can the pagination and the track both be the control?
They share one page number. A press on a pagination link sets the page and the track scrolls to it; a swipe, a drag or an arrow key moves the track and the pagination follows. The links are real links with an address of their own (?page=2); the block stops the navigation and moves the track instead. Replace the addresses with your own routes if each page should be a URL.
The page is the Carousel's controlled page.
What does the sort do?
Newest first is the log as kept; oldest first reverses it across all four pages, not within one, and returns to page 1 so you are never left on a page of the old order. The foot reads, for example, "Events 1–6 of 24 · Oldest first" and a screen reader hears it.
How does it work with a keyboard?
Tab reaches the sort control and then the pagination. With focus in the pagination the left and right arrow keys move the track (mirrored in a right-to-left layout), and Home and End jump to the first and last page. Previous and Next are marked unavailable at the ends and leave the tab order. The pages that are out of view are hidden from the tab order and from screen readers.