{"id":13673385,"url":"https://github.com/christiankaindl/LYTS","last_synced_at":"2025-04-28T09:30:38.374Z","repository":{"id":42591631,"uuid":"443603228","full_name":"christiankaindl/LYTS","owner":"christiankaindl","description":"Layout primitives for React","archived":false,"fork":false,"pushed_at":"2024-12-18T11:06:28.000Z","size":636,"stargazers_count":164,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-24T15:45:15.306Z","etag":null,"topics":["css","javascript","layout","react"],"latest_commit_sha":null,"homepage":"https://lyts.christiankaindl.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/christiankaindl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-01-01T18:51:53.000Z","updated_at":"2024-12-18T11:06:32.000Z","dependencies_parsed_at":"2024-01-14T16:29:44.359Z","dependency_job_id":null,"html_url":"https://github.com/christiankaindl/LYTS","commit_stats":{"total_commits":168,"total_committers":2,"mean_commits":84.0,"dds":"0.017857142857142905","last_synced_commit":"b9cb47b78141415b3692a0e4460a378a778d8bf3"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christiankaindl%2FLYTS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christiankaindl%2FLYTS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christiankaindl%2FLYTS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christiankaindl%2FLYTS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/christiankaindl","download_url":"https://codeload.github.com/christiankaindl/LYTS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251284867,"owners_count":21564684,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","javascript","layout","react"],"created_at":"2024-08-02T10:00:39.212Z","updated_at":"2025-04-28T09:30:38.367Z","avatar_url":"https://github.com/christiankaindl.png","language":"TypeScript","funding_links":[],"categories":["Vanilla based Frameworks/Libraries"],"sub_categories":[],"readme":"\u003cdiv align='center'\u003e\n  \u003ch1\u003eLYTS\u003c/h1\u003e\n  \u003cimg src='./src/component-icons.png' alt='Abstract illustrations depicting the available layout components' /\u003e\n  \u003cp\u003eLayout primitives for React.\u003c/p\u003e\n\u003c/div\u003e\n\n# LYTS\n\nLayout primitives to build any kind of layout with useful props like `bleed`, `asChild` and `xAlign`/`yAlign`.\n\n- **Like Lego** – Compose primitives to create complex layouts\n- **Tiny bundle** – Only 445 Bytes total ([source](https://bundlephobia.com/package/@christiankaindl/lyts@2.0.0-beta.3))\n- **Unstyled** – Bring your own styling solution—Tailwind, CSS Modules, you name it\n- **Layout props** – Simple \u0026 productive API\n\n⚛️ [Components API](https://lyts.christiankaindl.com/components) · 📚 [Guides](https://lyts.christiankaindl.com/guides) · 📖 [Examples](https://lyts.christiankaindl.com/examples)\n\nTo get started, import a base component and compose them together—\u003ca href='https://lyts.christiankaindl.com/components/stack'\u003eStack\u003c/a\u003e, \u003ca href='https://lyts.christiankaindl.com/components/row'\u003eRow\u003c/a\u003e, \u003ca href='https://lyts.christiankaindl.com/components/clamp'\u003eClamp\u003c/a\u003e, \u003ca href='https://lyts.christiankaindl.com/components/columns'\u003eColumns\u003c/a\u003e, \u003ca href='https://lyts.christiankaindl.com/components/grid'\u003eGrid\u003c/a\u003e—happy layout building!\n\n\u003e [!NOTE]\n\u003e 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.\n\n## Usage\n\nLayout components can be composed until you achieve your desired layout. For example, The following \\\u003cCenterCard\u003e component renders a card with a max-width of 400px, centers it and uses a \u003ca href='https://lyts.christiankaindl.com/components/stack'\u003eStack\u003c/a\u003e to get consistent spacing:\n\n![image]()\n\n```jsx\nconst CenterCard: FunctionComponent = function () {\n  return (\n    // A card with clamped 400px and centered\n    \u003cClamp clamp='400px'\u003e\n      \u003cStack gap={0.75} className='card'\u003e\n        \u003ch3\u003eCard title\u003c/h3\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u003c/p\u003e\n      \u003c/Stack\u003e\n    \u003c/Clamp\u003e\n  )\n}\n```\n\nCheck out the \u003ca href='https://lyts.christiankaindl.com/examples'\u003eExamples\u003c/a\u003e page for a comprehensive collection of layouts and how to build them with LYTS.\n\nA 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/)!\n\n## Support \u0026 help\n\nIf 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).\n\n## Local Development\n\n```sh\nnpm install\nnpm run dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristiankaindl%2FLYTS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchristiankaindl%2FLYTS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristiankaindl%2FLYTS/lists"}