LYTS

Layout primitives to build any kind of layout with useful props like bleed, asChild and xAlign/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 using forwardRef(). This means v2.0 may not work as intended when using with React 18 or earlier. If you want to pass refs to LYTS components and use React 18 or lower, consider using v1.2.0 instead, which has full support.

Usage

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 a Stack to get consistent spacing:

const CenterCard: FunctionComponent = function () {
  return (
    // A card with clamped 400px and centered
    <Clamp clamp='400px'>
      <Stack gap={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 the Examples 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!

Support & help

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

Local Development

npm install
npm run dev