Repository files navigation

LYTS

Layout primitives for React.

Layout primitives to build any kind of layout with useful props likebleed,asChild andxAlign/yAlign.

• Like Lego – Compose primitives to create complex layouts
• Tiny bundle – Only 445 Bytes total (source)
• Unstyled – Bring your own styling solution—Tailwind, CSS Modules, you name it
• Layout props – Simple & productive API

⚛️Components API · 📚Guides · 📖Examples

To get started, import a base component and compose them together—Stack,Row,Clamp,Columns,Grid—happy layout building!

Layout components can be composed until you achieve your desired layout. For example, The following <CenterCard> component renders a card with a max-width of 400px, centers it and uses aStack to get consistent spacing:

constCenterCard:FunctionComponent=function(){return(// A card with clamped 400px and centered<Clampclamp='400px'><Stackgap={0.75}className='card'><h3>Card title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></Stack></Clamp>)}

Check out theExamples page for a comprehensive collection of layouts and how to build them with LYTS.

A real-world example using LYTS is this documentation site, which makes extensive use of all components.Check out the code here!

If you get stuck,reach out to @christiankaindl on Twitter. In case of bugs,open an issue on GitHub.

npm installnpm run dev