@itwin/itwinui-layouts-react NPM

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.