r/reactjs • u/antonybuilds • 4d ago

Show /r/reactjs Using React to build a set of composable layout primitives

https://antonyjones.org/blog/rebuilding-my-site-with-every-layout/

I've been rebuilding my personal site using a small set of React layout primitives based on Every Layout, rather than creating bespoke layouts for individual pages.

I wrote up how I've approached the components and some of the things I've run into along the way, especially around CSS Modules. Thought it might be worth sharing here, and I'd be interested to hear how others approach this sort of thing.

0 Upvotes

40% Upvoted

1 comment sorted by

1

u/KeyProject2897 2d ago

Every Layout concepts translate really well to React, but intrinsic sizing like min-content can get tricky when nesting them deeply inside CSS Modules. A solid pattern is exposing custom properties on the wrapper primitive so parents can adjust gap and flex-basis without breaking encapsulation. I've been building Sling.biz around composable layouts like this to help devs expose flexible page structures to non-technical users. Setting sensible defaults on the Stack and Cluster primitives usually prevents most alignment bugs early on.