Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Stock Table Detail Integration Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An integration detail section for Solid with Ark 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.

All 100 integration blocks