Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Error Logs Carousel Block for React Aria

Six error groups of an error tracker, one per slide, each with its severity, a mono stack in left-to-right order, a fourteen-day strip and a Resolve button that re-derives the open and resolved counts.

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

Triage one error group at a time, with this error logs carousel for React with React Aria. Snagboard, an error tracker, shows six groups on a one-up track. A band of three counts (open groups, open events, resolved) sits above it. Each slide has the severity as a word with a dot weight, the service, the error in mono, a five-frame stack in dir="ltr" with the app's own frame in bold, the events, users and dates, and fourteen bars of daily counts in foreground weights. Resolve is the one primary on the group in view; it marks the group resolved in place and the three counts above re-derive, and Reopen puts it back. Events are the sum of the daily counts, so nothing is typed twice. It uses Badge, Button and Guides. The product and its errors are made up.

FAQ

How do I use my own groups?

Edit GROUPS: a type, a message, a service, a level, users, the first and last ISO dates, five frames and fourteen daily counts. Events and the strip come from daily.

How does it work with a keyboard?

Tab reaches the controls in the open slide, the dots, Previous and Next. With focus inside the track, the arrow keys move between slides (mirrored in a right-to-left layout) and Home and End jump to the first and last. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled. Slides out of view are hidden from the tab order and from screen readers.

What is announced when I resolve a group?

The foot, the one polite live region, reads for example "Resolved TypeError, 5 open".

What stays local in the demo?

Resolving only changes local state and nothing is sent. To wire it for real, call your tracker's API from flip and load the groups from it.

How does it look on a phone?

One group fills the width: the facts go under the stack, the counts stay in a row of three, and the foot's counter and buttons share a line with the dots below. The stack scrolls sideways inside its box.

All 100 carousel blocks