LYTS

Layout primitives for React.

LYTS

Layout primitives to build any kind of layout with useful props like bleed, asChild and xAlign/yAlign.

• Composable – Combine to create complex layouts
• Small bundle – 4kB when using all exports
• Unstyled – Use the styling solution of your choice
• Layout props – Simple, productive API

Docs

https://lyts.christiankaindl.com

⚛️ Components · 📚 Guides · 📖 Examples

Installation

npm install @christiankaindl/lyts

After intallation, import the necessary CSS styles into your application. For example in a Next.js app, import them in _app.js:

/* _app.js */
import '@christiankaindl/lyts/style.css' // Import the library styles here

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

And that's all there is to set up! Now import one of the base components—Stack, Row, Clamp, Columns, Grid—and start building great layouts.

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