May 2025 Updates

[t-kelly]

Hey everyone! 👋 We're back with another cycle update, sharing the latest from our Devkit team. We've made some exciting progress, and we're setting our sights on some ambitious next steps.

🚀 What We Shipped

• Namespacing Convention We've established a [namespace].[component].[variant] convention across all our components and files. For example, section signifies components designed explicitly for sections, while block is reserved for block files. We've also included namespaces like utility, layout, element, and overlay for primitives, the lego blocks of building new, more complex compositions. Variants further refine components, such as element.text.body and element.text.heading. This brings clarity and organization as our component library expands.

• Enhanced Locales Tooling Fixed bugs affecting translation key detection and improved overall reliability in the component localization workflow. Check out the new locale clean and locale sync commands.

themelocale.mp4

• Text Component Say goodbye to hardcoded text! Our versatile Text component handles multiple heading and body sizes, accent font stacks, basic formatting such as ALLCAPS, and even rich text editor (RTE) content for default HTML formatting. It's flexible and significantly reduces code redundancy.

element.text.mp4

• Grid Component We built responsive CSS grids using reusable Liquid components, enabling simple column grids and custom proportioned grids with ease. The syntax is intuitive, eliminating the need for messy grid classes and overrides. It comes with two handy variants: gap grid (default) and line grid.

layout.grid.mp4

• Stack Component Quickly organize your UI with our new Stack component. Leveraging CSS Flexbox, it allows simple arrangement of lists or grouped elements in rows or columns. Clean, efficient, and versatile.

layout.stack.mp4

• Stylesheet Utility Our battle-tested Stylesheet utility component is now production-ready. It smartly inlines critical CSS directly into the header and the first three sections of the page body, optimizing performance right out of the box. Just in time for Shopify to make it redundant by supporting {% stylesheet %} tag in snippets?

• Polishing & QA We've refined and polished our components extensively to ensure they're production-ready. Updated versions of Expanse, Fetch, and Gem themes are fully QA’d and ready for release. We're just holding back momentarily in anticipation of upcoming Shopify Liquid improvements from Editions.dev. The latest versions are available to Devkit members!

expanse.mp4

• Design Component Refactoring Our full library of section and block level components have been refactored with updates from primitives and ui elements, bringing them to the same construction quality at every level. Sections have been reworked to scale more responsively across breakpoint changes.

• New and Updated Design Components Additions to the library include Divider, Breadcrumb, Media components, Promo Grid section, Product Showcase sections (Related products, More from Vendor, etc), and Page templates.

page-template.mp4

promo-grid.mp4

• Design System Documentation & Organization Documentation structures have been added to the Figma library, providing overviews for all variables, elements, and sections within. This allows for quick understanding of what is possible with each component, and a demo of each variant in use. The file has also been updated with a more intuitive page structure and asset panel organization.

🎯 What's Next

• PDP Case Study - We want to prototype Shopify’s high-variant products spec as well as combined listings and structure our PDP as a component that can be installed on any theme, including Dawn. Hoping this will be a great opportunity to generate additional resources around building your own sections with components and adopting components in your theme project incrementally.
• Component Explorer With our collection of robust and consistently designed primitives, we're excited to build a Component Explorer, making our components easily browsable and quickly referenceable.
• Cursor Rules Integration Let's face it—few devs dive deep into documentation these days. To bridge this gap, we're planning to integrate our conventions and best practices directly into Cursor rules, allowing developers to leverage AI-assisted coding and boost productivity.
• Minimal Starter Theme Our current themes are feature-rich, but sometimes you need something leaner. We'll develop a minimal starter theme, offering just the essentials to start a project quickly and efficiently, keeping the learning curve low and flexibility high.
• Global CSS Cleanup Our goal is to make components as self-contained as possible. We're focusing on trimming down remaining global CSS in the head.styles component to a minimal, intentional set—further decoupling components and increasing modularity.
• Section Refinements Some sections are straightforward, others more complex. We want to give targeted improvements to critical sections like Header, Main Collection, and Slideshow. Which sections would you like us to prioritize?

We love hearing your thoughts and feedback—let us know what's resonating and what you'd like to see next!