shadcn.io is not affiliated with official shadcn/ui
Google Cloud List Integration Block for Radix UI
An integration list section for an event-loading tool connecting to Google Cloud: daily BigQuery partitions as rows in a fixed, focusable window seven rows tall, a 7 or 14 day choice, size and a bar worked out from the rows, and a working Backfill on the days that failed or arrived short.
Installation
Overview
An integration list section for React with Radix UI, written for Ferrybase, a fictional tool that loads a product's events into BigQuery, and its Google Cloud connection. A compact header ("Daily partitions, loaded and checked") has the mark pair at its end. Under a band rule, a segmented choice (7 days, 14 days) sits beside the table's name. Below it, the daily partitions of the events table are rows in a focusable window of fixed height, seven rows tall, so the 14-day view scrolls inside it without moving the page. Each row has the weekday and date written fixed ("Tue 13 Oct") over its partition name in code (events$20261013), the rows loaded, a size worked out from the rows, a small bar of how much of the expected rows arrived, and the state as a dot and a word (Loaded, Partial or Failed). The failed day (9 October) and the partial day (3 October, in the 14-day view) have Backfill, which runs for about a second and then reads Loaded with every expected row. A foot band, a polite status line from load, counts the days in the window and says that nothing is sent to Google Cloud. The block ends on that band, so no rule closes it. On a phone the size drops into the row's second line and the bar is hidden. The page's rails and top rule come from the Guides spine. It's built from Guides, Segment Group, Status and Button, with your theme's tokens for every colour. Google Cloud is named in text only: no Google logo, colour or wordmark ships with the block. Nothing is sent to Google Cloud, and the days, rows and sizes are example data.
FAQ
How do I change the days and the figures?
Edit DAYS at the top of the file, newest first: each day has an ISO date, the expected rows, the rows loaded and a state (loaded, partial or failed). The weekday comes from the date itself ("2026-10-13" is "Tue 13 Oct"), never from the clock, so the page reads the same on every day and in every browser. The size is worked out from the rows (ROW_BYTES, about 98 bytes an event row), and the bar, the counts in the foot line and the partition name are worked out from the same data.
Does Backfill reload anything in BigQuery?
No. Backfill shows the day as running for about 900 milliseconds and then as loaded with every expected row. The foot line says so from the first paint ("Backfill changes this page only. Nothing is sent to Google Cloud.") and takes focus when a backfill finishes, so the result is read out. In a real product, wire backfill to your own reload of that day's partition.
How does the window of rows work?
The rows live in a region seven rows tall that takes keyboard focus: the arrow, Page and Home keys scroll it. The 7-day choice fills it exactly; the 14-day choice scrolls inside it and returns to the top when you switch. Because the height is fixed, switching never moves the foot band or anything below the block.
How does it work with keyboards and screen readers?
The days choice is a labelled segmented group, the window is a labelled region you can focus, and each Backfill button is named for its day ("Backfill Fri 9 Oct") and marked busy while it runs. The state is a dot and a word, never colour alone, and only the failed day uses the status colour. The rows loaded are read with their unit.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone each row keeps the date, the state and Backfill, with the rows and size on a second line, and the window is a little taller so two lines fit. Partition names, numbers and the bar keep their left-to-right order in a right-to-left layout while the rows themselves flip. The header fades up once on load and the bars change width briefly; reduced motion turns both off and the running dot stops pulsing.