LYTS

Abstract illustrations depicting the available layout components

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>
  )
}