shadcn.io is not affiliated with official shadcn/ui
Stock Table Detail Integration Block for React
An 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.
Installation
Overview
An integration detail section for React with Base UI, written for Tallybin, a fictional stock sync tool for small merchants, and its Shopify connection. It's a reverse split: the copy comes first in the page and the framed figure sits at the start from lg up. The figure is a table of three variants at one location, with what Shopify shows on hand, what Tallybin sets once it holds a reserve back, and the gap ("=" or "−2"); each row carries a thin bar whose hatched end is the reserve, so nothing relies on colour, and a total row closes the table. At the end, the header; the four access scopes in code, a lock marking the three read-only ones and an open lock the one that writes, under the line that no customer or order scope is asked for; and the mark pair (Tallybin's tile and Shopify's neutral lettermark tile) above a Connect Shopify Shine Button and a docs link. Under a band rule, three steps sit side by side. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, Shine Button, Button and Badge, with plain CSS for the bars and 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
How do I change the figures in the table?
Edit VARIANTS (a name, a SKU and what Shopify shows on hand) and the two numbers beside it: RESERVE, the units held back, and NEEDS, how much a variant must have on hand before any is held. What Tallybin sets, the gap, each bar's two parts, the count in the caption and the narrow-screen notes are all worked out from those.
Are the access scopes real Shopify scopes?
Yes. read_products, read_locations, read_inventory and write_inventory are Shopify Admin API access scopes, and the install lists exactly those four. A merchant approves them on Shopify's own screen when the app is installed. No read_orders or read_customers is requested, which is what the line above the list says. If your product asks for more, add rows to PERMISSIONS: the counts are derived from it.
Does anything connect or read from Shopify?
No. The figures are typed example data, the buttons are plain links to put your own install URL on, and nothing is read from or sent to Shopify. The block has no state.
Is the table accessible?
It is a real table with a caption, column headers and a row header per variant. The bars are decorative and hidden from assistive technology; the same numbers are in the cells. Below md the gap column folds into the variant cell as "2 held back" or "Nothing held back", so a phone has no sideways scroll.
How does it behave in right-to-left layouts and on a phone?
The split reverses with the page direction, the copy and header follow it, and every number, SKU and scope sits in its own isolate so it keeps its own direction. On a phone the figure comes first, then the access list, the three steps stacked and the buttons. The only motion is the entrance fade-up, and reduced motion turns it off.
Related
- 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
Unmatched Variants List Integration
Synced tablesAn 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.
- 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
Slack Detail Integration
Scopes and stepsAn integration detail section for a spend tool connecting to Slack: a header with the mark pair and Add to Slack, then what it does, the Slack scopes it reads and writes, three steps to install and the listing's facts.
- Pro
Hotspot Canvas Detail Integration
With a product drawingAn integration detail section for a design-docs tool connecting to Figma: a framed canvas sketch at the start whose frames, comment pin and variables panel light up as you point at the three read-only scopes, with three steps and Connect Figma.