Is there a quick way to replace an existing React-based tabs setup with the same tab functionality used in a Web Component? Or would we need to rebuild the tabs as a custom implementation to match the Web Component behavior?
It’s possible to build a tabbed UI using s-clickable
e.g in Discount Kit:
IMO, it works well, but tabbed UX does have some nuisance, e.g scrollable when on mobile. Would add a +1 for something like <s-tabs> to be added in future!
It looks like its coming soon in 2026-01
1 Like
Thanks for sharing this, @bkspace ! Yes, it’s definitely possible to build a tabbed UI using s-clickable—I’ve tried a similar approach as well. It works, but maintaining the same UX as the older React-based tabs is still challenging, especially when it comes to responsiveness. On mobile, the scrollable tab behavior can be a bit inconvenient.
I agree that having an official <s-tabs> component would make things much cleaner.
@DanGamble — really appreciate the GitHub link. Great to see that the s-tab component documentation is already in progress. Although the PR is still marked as WIP and not ready to merge, it’s encouraging to know Shopify is actively working on it. Definitely looking forward to the final implementation!
To achieve a tab-like layout in Web Components, we can also use s-clickable-chip. I explored this approach as well, and the results are promising. The UI/UX feels much closer to the older React-based tab implementation compared to other alternatives.
<s-section padding="none">
<s-stack
direction="inline"
padding="base"
gap="small-300"
blockSize="55px"
>
<s-clickable-chip
color={currentTab === 0 ? "strong" : "base"}
onClick={() => setCurrentTab(0)}
>
Custom recommendations
</s-clickable-chip>
<s-clickable-chip
color={currentTab === 1 ? "strong" : "base"}
onClick={() => setCurrentTab(1)}
>
Bundles
</s-clickable-chip>
</s-stack>
{currentTab === 0 ? (
<FbtList list={customList} loading={loading} />
) : (
<BundleList list={bundleList} loading={loading} />
)}
</s-section>
