An open-source design system that helps us build a unified web experience.

## Key features iTwinUI-layouts places given React (eg. [iTwinUI-react](https://github.com/iTwin/iTwinUI/)) components accordingly within the page with minimal effort on the development side. --- ## Installation #### CSS package ``` npm install @itwin/itwinui-layouts-css ``` ``` yarn add @itwin/itwinui-layouts-css ``` #### React package ``` npm install @itwin/itwinui-layouts-react ``` ``` yarn add @itwin/itwinui-layouts-react ``` --- ## Usage #### CSS package ```css // app.css import '@itwin/itwinui-layouts-css/styles.css'; ``` ```html ``` #### React package Import layouts CSS in your root component then the layouts component you want and start using it! ```jsx import '@itwin/itwinui-layouts-css/styles.css'; import { PageLayout } from '@itwin/itwinui-layouts-react'; const App = () => ( {/* Your header code */} {/* Add side navigation here */} {/* Main page content goes here */} ); ``` --- ## Contributing We 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). Please read our [CONTRIBUTING.md](https://github.com/iTwin/iTwinUI-layouts/blob/main/CONTRIBUTING.md) for more information.