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

Key features • Installation • Usage • Contributing

Key features

iTwinUI-layouts places given React (eg. iTwinUI-react) 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

// app.css
import '@itwin/itwinui-layouts-css/styles.css';

<!-- app.html -->
<div class="iui-layouts-page">
  <div class="iui-layouts-page-header">
    <!-- Your header code -->
  </div>
  <div class="iui-layouts-page-sidenav">
    <!-- Your side navigation -->
  </div>
  <div class="iui-layouts-page-content iui-layouts-page-content-padded">
    <!-- Your content (will be padded) -->
  </div>
</div>

React package

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.