@itwin/itwinui-layouts-react

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

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.