shadcn.io is not affiliated with official shadcn/ui
Unmatched Variants List Integration Block for Ark UI
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 Ark 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.