An open-source design system that helps us build a unified web experience.
Key features
iTwinUI-layouts places given React (eg. iTwinUI-react) components accordingly within the page with minimal effort on the development side.
Installation
npm install @itwin/itwinui-layouts-react
yarn add @itwin/itwinui-layouts-react
Usage
Import layouts CSS in your root component then the layouts component you want and start using it!
import '@itwin/itwinui-layouts-css/styles.css';
import { PageLayout } from '@itwin/itwinui-layouts-react';
const App = () => (
<PageLayout>
<PageLayout.Header>{/* Your header code */}</PageLayout.Header>
<PageLayout.SideNavigation>
{/* Add side navigation here */}
</PageLayout.SideNavigation>
<PageLayout.Content>{/* Main page content goes here */}</PageLayout.Content>
</PageLayout>
);Contributing
We welcome you to contribute and make this layouts library better. You can submit feature requests or bugs by creating an issue. Please read our CONTRIBUTING.md for more information.