Component-Based Architecture
Blog
Guides and tutorials for building modern websites
Learn how to build, structure, and optimize component-based Metalsmith sites. From architecture fundamentals to advanced techniques.

Adding Smooth Page Transitions with SWUP
Learn how to implement smooth, app-like page transitions in your Metalsmith site using SWUP. Includes component re-initialization patterns, prefetching for instant navigation, and backwards-compatible implementation.
Adding a Top Message Bar to Your Header
A step-by-step guide to adding a dismissible announcement bar above your header with cookie persistence and smooth animations
Building a Component from Scratch
A comprehensive guide to creating your own Metalsmith component from the ground up, complete with validation, documentation, and submission to the library
Adding Header Search to Your Site
A step-by-step guide to adding a header search form from the Metalsmith Components library to your starter project
Adding Dark/Light Theme Switcher
A step-by-step guide to adding a dark/light theme toggle from the Metalsmith Components library to your starter project
Installing Metalsmith Components in Your Project
Step-by-step guide to downloading and installing component packages. Learn how to add sections and partials to your Metalsmith project with automated install scripts.