- Notifications
You must be signed in to change notification settings - Fork5
Layout primitives for React
License
christiankaindl/LYTS
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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!
Note
Version 2.0 introduced support for React 19, and migrated away from usingforwardRef(). This means v2.0 may not work as intended when using with React 18 or earlier. If you want to passrefs to LYTS components and use React 18 or lower, consider using v1.2.0 instead, which has full support.
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
About
Layout primitives for React