{"id":18961002,"url":"https://github.com/itwin/itwinui-layouts","last_synced_at":"2025-04-19T10:56:46.553Z","repository":{"id":38187988,"uuid":"452694506","full_name":"iTwin/iTwinUI-layouts","owner":"iTwin","description":"iTwinUI-layouts places given React components accordingly within the page with minimal effort on the development side.","archived":false,"fork":false,"pushed_at":"2025-04-11T15:58:31.000Z","size":30183,"stargazers_count":6,"open_issues_count":5,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-11T16:59:29.970Z","etag":null,"topics":["layouts","library","react","reactjs","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://itwin.github.io/iTwinUI-layouts","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/iTwin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-27T13:31:42.000Z","updated_at":"2025-04-11T15:58:33.000Z","dependencies_parsed_at":"2024-02-12T16:31:44.210Z","dependency_job_id":"2d92d3aa-b291-411e-83d2-01b266e4bad9","html_url":"https://github.com/iTwin/iTwinUI-layouts","commit_stats":{"total_commits":101,"total_committers":11,"mean_commits":9.181818181818182,"dds":0.7623762376237624,"last_synced_commit":"11465e017cedf3159a18bda5cb24ae6c760c0b06"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iTwin%2FiTwinUI-layouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iTwin%2FiTwinUI-layouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iTwin%2FiTwinUI-layouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iTwin%2FiTwinUI-layouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iTwin","download_url":"https://codeload.github.com/iTwin/iTwinUI-layouts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249678865,"owners_count":21309836,"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":["layouts","library","react","reactjs","ui","ui-components"],"created_at":"2024-11-08T14:10:56.855Z","updated_at":"2025-04-19T10:56:46.536Z","avatar_url":"https://github.com/iTwin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource\n      media='(prefers-color-scheme: dark)'\n      srcset='https://itwin.github.io/iTwinUI/logo-dark.svg'\n    /\u003e\n    \u003cimg\n      src='https://itwin.github.io/iTwinUI/logo.svg'\n      alt='iTwinUI logo'\n    /\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eAn open-source design system that helps us build a unified web experience.\u003c/p\u003e\n  \n\u003cdiv align=\"center\"\u003e\n\n[![Build status](https://github.com/iTwin/iTwinUI-layouts/actions/workflows/build.yml/badge.svg?branch=main)](https://github.com/iTwin/iTwinUI-layouts/actions/workflows/build.yml?query=branch%3Amain)\n\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  \n  [Key features](#key-features) • [Installation](#Installation) • [Usage](#Usage) • [Contributing](#contributing)\n\n\u003c/div\u003e\n\n## Key features\n\niTwinUI-layouts places given React (eg. [iTwinUI-react](https://github.com/iTwin/iTwinUI/)) components accordingly within the page with minimal effort on the development side.\n\n---\n\n## Installation\n\n#### CSS package\n\n```\nnpm install @itwin/itwinui-layouts-css\n```\n\n```\nyarn add @itwin/itwinui-layouts-css\n```\n\n#### React package\n\n```\nnpm install @itwin/itwinui-layouts-react\n```\n\n```\nyarn add @itwin/itwinui-layouts-react\n```\n\n---\n\n## Usage\n\n#### CSS package\n\n```css\n// app.css\nimport '@itwin/itwinui-layouts-css/styles.css';\n```\n\n```html\n\u003c!-- app.html --\u003e\n\u003cdiv class=\"iui-layouts-page\"\u003e\n  \u003cdiv class=\"iui-layouts-page-header\"\u003e\n    \u003c!-- Your header code --\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"iui-layouts-page-sidenav\"\u003e\n    \u003c!-- Your side navigation --\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"iui-layouts-page-content iui-layouts-page-content-padded\"\u003e\n    \u003c!-- Your content (will be padded) --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### React package\n\nImport layouts CSS in your root component then the layouts component you want and start using it!\n\n```jsx\nimport '@itwin/itwinui-layouts-css/styles.css';\nimport { PageLayout } from '@itwin/itwinui-layouts-react';\n\nconst App = () =\u003e (\n  \u003cPageLayout\u003e\n    \u003cPageLayout.Header\u003e{/* Your header code */}\u003c/PageLayout.Header\u003e\n\n    \u003cPageLayout.SideNavigation\u003e\n      {/* Add side navigation here */}\n    \u003c/PageLayout.SideNavigation\u003e\n\n    \u003cPageLayout.Content\u003e{/* Main page content goes here */}\u003c/PageLayout.Content\u003e\n  \u003c/PageLayout\u003e\n);\n```\n\n---\n\n## Contributing\n\nWe welcome you to contribute and make this layouts library better. You can submit feature requests or bugs by creating an [issue](https://github.com/iTwin/iTwinUI-layouts/issues).\nPlease read our [CONTRIBUTING.md](https://github.com/iTwin/iTwinUI-layouts/blob/main/CONTRIBUTING.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitwin%2Fitwinui-layouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitwin%2Fitwinui-layouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitwin%2Fitwinui-layouts/lists"}