shadcn.io is not affiliated with official shadcn/ui
Data Sources Carousel Block for Ark UI
Eight data connections on a hairline track with a status legend as the filter, All, Connected, Syncing and Failed with counts, a Sync now on each cell that updates the counts, and an empty state that holds the frame.
Installation
Overview
Show every connection and its health at a glance, with this data sources carousel for React with Ark UI. Inletwise, a data-pipeline console, lists eight connections in one ruled panel. Each hairline cell has a neutral two-letter tile, the name, the kind of source, a status as a glyph and a word (Connected, Syncing or Failed), the last sync, a compact record count and a ghost Button "Sync now". At the end, a side cell lists the statuses with their counts, All 8, Connected 5, Syncing 2 and Failed 1, as buttons: the pressed one filters the track and goes back to the first connection. The counts are worked out from the connections, so Sync now on the failed one flips it to synced and the Failed count falls to zero, leaving an Empty state in the same frame. Three connections show from the large breakpoint, two from small and one with the next peeking on a phone, where the legend stacks under the track. A foot holds the counter, a window of dots and Previous and Next. It's built from Carousel, Button, Empty and Guides. Nothing connects or is read; the connections are made up.
FAQ
How do I use my own connections?
Edit SOURCES: an id, a name, a kind, a status (connected, syncing or failed), a last ISO stamp, a records count and a two-letter tile. The legend counts, the filter and the compact record counts ("1.3M", "312.4K") are all worked out from that list. The tile is a slot for a logo you have the rights to use; the demo never draws a brand's mark.
What does Sync now do?
In the demo, it marks the connection as synced locally: a failed connection becomes Connected, a connected one says "Synced in this demo" in place of its last-sync stamp, and the legend counts follow. A syncing connection ignores it. The foot says what happened ("Mobile crashes synced in this demo") and nothing is read from anywhere.
Is the legend a filter?
Yes. Each status is a button that is pressed when it is the filter; pressing it rebuilds the track, goes back to the first connection and recounts the pages. If the filter is left with no connections, the track keeps its height and an empty state takes its place. If a Sync now moves the connection you pressed out of the filter, focus goes to the pressed legend button.
The track follows the filter through the Carousel's slideCount and a controlled page.
How does it work with a keyboard?
Tab reaches Previous, the dots, Next, each visible Sync now and the legend buttons. With focus inside the track, the arrow keys move it by one connection (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Connections that are out of view are hidden from the tab order and from screen readers.