shadcn.io is not affiliated with official shadcn/ui
Unmatched Variants List Integration Block for React
An integration list section for a stock sync tool connected to Shopify: seven variants waiting for a match as rail-to-rail rows, each with a Select to pick one of your items, a Skip button and a state, under a progress bar and a count worked out from the rows.
Installation
Overview
An integration list section for React with Base UI, written for Tallybin, a fictional stock sync tool for small merchants, and its Shopify connection. A compact header carries the mark pair at its end. Under a band rule, a thin bar and a sentence are worked out from the rows ("2 of 7 matched, 1 skipped, 4 waiting") beside a polite status line that says every choice stays on the page. Then seven Shopify variants that arrived without a match sit as rail-to-rail rows: the variant's name and SKU, a Select to match it to one of your Tallybin items, and its state as a glyph and a word. Choosing an item turns the row to Matched; Skip sets a variant aside and Undo brings it back, and a skipped row is quieter in tone rather than removed. Every row keeps its height in every state, so choosing never moves the page. On a phone the Select drops under the name. The page's rails and top rule come from the Guides spine, and the block ends on its last row. It's built from Guides, Select, Progress and Button, 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 row is example data; nothing is read from or sent to Shopify.
FAQ
How do I change the variants and the items?
VARIANTS lists the Shopify variants (an id, a name and a SKU), ITEMS the Tallybin items a variant can be matched to, and START the rows that begin matched. The bar, the sentence and the status messages are worked out from the rows' state, so nothing else needs editing.
Does choosing a match change anything in Shopify?
No. Matching and skipping change state on this page only, and a polite status line says so from the start and after every change: "Stoneware mug, oat is matched to Oat mug, small in this demo". Wire match and skip to your own mapping store to make it real.
What does Skip do, and can I undo it?
Skip sets a waiting variant aside: its state reads Skipped, the text goes a step quieter and the count updates. Undo returns it to waiting. Choosing an item in a skipped row matches it and clears the skip. Matched rows have no Skip, because their Select is how you change them.
How do keyboard and screen reader users work it?
Each Select is named "Match" plus the variant's name and "to a Tallybin item", and each Skip or Undo button names its variant. The rows are a real list with an h3 per variant. After every change the status line reads out what happened and the new count. The bar is decorative; the count is in text.
How does it behave on a phone and in right-to-left layouts?
On a phone each row is two lines: the name with its state and button, then the Select at full width. SKUs and counts keep their own direction inside an isolate, and the layout mirrors with the page. The only motion is the header's fade-up on load, and reduced motion turns it off.
Related
- Pro
Stock Table Detail Integration
With a product drawingAn integration detail section for a stock sync tool connecting to Shopify: a framed before-and-after table of three variants with a hatched reserve, beside the four access scopes, three steps and a Connect Shopify button.
- Pro
Approval Screen Setup Integration
Choose and verifyAn integration setup section for a stock sync tool installing on Shopify: a narrow framed panel that sketches the approval step, with a store-handle field and fixed .myshopify.com suffix, four locked access scopes, a reserve location and an Install button.
- Pro
Location Cards Grid Integration
Switch and tick gridsAn integration grid section for a stock sync tool connected to Shopify: four locations as a 2 by 2 of hairline cells, each with units on hand, a bar of stock held back, a sync switch and a slider for the reserve per variant, and a tally worked out from them.
- Pro
Reconciliation Ledger Stats Integration
Rings and talliesAn 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.
- Pro
AWS List Integration
Synced tablesAn integration list section for a cloud cost tool reading from AWS: six cost-allocation tags as rows with a coverage bar, a state word and an Activate switch, a segmented filter with counts, and a working Retry on the one row that timed out.
- Pro
Grouped Comments List Integration
Grouped and triagedAn integration list section for a design-docs tool connected to Figma: comments grouped by frame in an accordion running rail to rail, a toggle that hides resolved ones without moving a header, and a Retry for the one comment that failed to sync.