shadcn.io is not affiliated with official shadcn/ui
Reconciliation Ledger Stats Integration Block for Ark UI
An integration stats section for a stock sync tool reading from Shopify: a rail-to-rail ledger table of seven days comparing the units that left stock as Shopify reports them with Tallybin's count, the gap and each day's state, with a total row and a headline counted from it.
Installation
Overview
An integration stats section for React with Ark UI, written for Tallybin, a fictional stock sync tool for small merchants, and its Shopify connection. A compact header opens with a headline counted from the data ("1,284 of 1,284 units reconciled"), with the mark pair at its end. Under a band rule the ledger runs rail to rail as a real table: seven days, the units that left stock as Shopify reports them, as Tallybin first counted them, the gap ("=" or "−1") and each day's state, with a hairline between the two counts and a total row on a quiet tint. One day was a unit short and was recounted the next; its gap stays on the page as it was, and its state says it was resolved, so the table shows both what went wrong and that it closed. On a phone the state folds under the day. The page's rails and top rule come from the Guides spine, and the block ends on the total row. It's built from Guides and a native table, with your theme's tokens for every colour. Shopify is named in text only: no Shopify logo, colour or wordmark ships with the block. Every figure is example data; nothing is read from Shopify.
FAQ
Where do the figures come from, and how do I change them?
They are typed example data in DAYS: a day name, the units Shopify reported, the units Tallybin counted and, for a day that was recounted, the day it was closed. Everything else is worked out from that list: each gap, the totals, the units reconciled in the headline, how many days were recounted and the state words. Wire the list to your own daily counts and nothing else needs editing.
What are the units, and does the block read orders?
They are units that left stock, the stock movements a sync sees, not orders or customers: the product never asks Shopify for either. The block does not claim anything about how Shopify reports them. The comparison is the fictional product's own reconciliation, and the figures are an example.
Why does the Wednesday gap stay in the table after it was fixed?
The ledger keeps the original difference so the history is honest: the gap column is what the two counts were, and the state column is what was done about it. The headline counts a recounted day as reconciled, and says how many days that was.
Is the table accessible?
It is a real table with a caption, column headers, a row header per day and a total row in a footer. The scroll region around it is focusable with a visible ring, so a keyboard can reach it on a narrow screen, and it is named. The gap uses a minus sign or an equals sign, never colour. Below md the state folds into the day's cell so nothing needs sideways scrolling at common phone widths.
How does it behave on a phone and in right-to-left layouts?
On a phone the table keeps the day, the two counts and the gap in four columns, with the state under the day. In a right-to-left layout the columns mirror with the page, and every number sits in its own isolate so it keeps its own direction. The only motion is the header's fade-up on load, and reduced motion turns it off. The block has no state.