https://github.com/christiankaindl/LYTS
Layout primitives for React
https://github.com/christiankaindl/LYTS
css javascript layout react
Last synced: about 1 year ago
JSON representation
Layout primitives for React
- Host: GitHub
- URL: https://github.com/christiankaindl/LYTS
- Owner: christiankaindl
- License: mit
- Created: 2022-01-01T18:51:53.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-12-18T11:06:28.000Z (over 1 year ago)
- Last Synced: 2025-04-24T15:45:15.306Z (about 1 year ago)
- Topics: css, javascript, layout, react
- Language: TypeScript
- Homepage: https://lyts.christiankaindl.com
- Size: 621 KB
- Stars: 164
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
LYTS
Layout primitives for React.
# 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](https://bundlephobia.com/package/@christiankaindl/lyts@2.0.0-beta.3))
- **Unstyled** – Bring your own styling solution—Tailwind, CSS Modules, you name it
- **Layout props** – Simple & productive API
⚛️ [Components API](https://lyts.christiankaindl.com/components) · 📚 [Guides](https://lyts.christiankaindl.com/guides) · 📖 [Examples](https://lyts.christiankaindl.com/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 `ref`s 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 \ component renders a card with a max-width of 400px, centers it and uses a Stack to get consistent spacing:
![image]()
```jsx
const CenterCard: FunctionComponent = function () {
return (
// A card with clamped 400px and centered
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
)
}
```
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](https://github.com/christiankaindl/LYTS-website/)!
## Support & help
If you get stuck, [reach out to @christiankaindl](https://twitter.com/christiankaindl) on Twitter. In case of bugs, [open an issue on GitHub](https://github.com/christiankaindl/LYTS/issues).
## Local Development
```sh
npm install
npm run dev
```