March 2025 Update

[t-kelly]

We've been keeping busy the past two months, shipping lots of new components, improving existing ones, and getting closer to our vision for Devkit that will be available to the masses. 🚀 Lots of focus on CSS with this update 👨‍🎨

What we've shipped:

1. Primitive Element Components

The lego pieces of components. Build new compositions with new Button, Input, Checkbox, Chip, Badge, Swatch, Radio, Quantity Selector, and Accordion components.

2. Devkit Shopify CLI plugin

We rebuilt and renamed our Shopify CLI plugin to be simpler and easier to maintain. There’s also some new fancy features! Check out all the details and the new plugin-devkit repo

3. Rolling out primitive to compositions

30+ components are simpler and easier to maintain thanks to harnessing reusable primitives. Check out archetype-themes/components (members only) for the latest!

4. NoBuild CSS Rollout

Each component imports it's own unbundled stylesheet which is either automatically inlined on the page or loaded async. Faster render speeds thanks to no render blocking stylesheets. Check out our Breaking the Bundle post for more details here.

5. Native Color Scheme Support

Shopify color schemes that don’t suck! Customize your entire theme with contrasting primary and secondary color pairs. This is the way. More details and dedicated write up on this soon!

colors.1.mp4

6. Typography Tokens and Scaling

Beautiful, non-linear typography size scales, e.g. sizes that progress like 36px, 40px, 48px, 56px, 72px, 96px, that can be easily adjusted in the theme editor with the flick of slider. There's some magic under the hood that you can find in the styles-font-scale component

7. Private + Public Style Tokens

Conventions on public and private CSS variables allow for easy overrides and adjustments. Great walkthrough on this in our handbook (members-only).

What's up next:

1. Finish Primitive Components v1 - Element components including Text, Media, Price, Divider, Pagination, Breadcrumb and layout components including card, bleed, block-stack, box, grid, inline-grid, inline-stack, section, and block.
2. Component Explorer Presets for Primitives - Highlight the fundamental configurations for each primitive using component setup files so they can be previewed, tested, and maintained in isolation.
3. Theme Components + Theme Blocks - Theme blocks were brought out of developer preview this past December. Theme components complement them perfectly. We're going to be rolling out a demo and proof-of-concept in reference-components PDP blocks.
4. Component Explorer Reference Experience - We have a good idea of what the reference experience needs to look like for Liquid components. Lots of inspiration from Polaris and Shoelace components!
5. Component powered Figma files for Expanse + Fetch - Our Devkit Figma file is feeling stable enough to generate full theme files from so we're going to be starting with Expanse and Fetch
6. Cursor rules - We've been been documenting architecture, best-practices, and conventions in our handbook repo and plan to put them to practical use with a set of Cursor rule files to assist in creating and maintaining theme components