Novice, Practiced, Mastered

    @itwin/itwinui-layouts-react
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    iTwinUI-layouts logo

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

    itwinui-layouts on npm Build status

    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.

    Install

    npm i @itwin/itwinui-layouts-react

    DownloadsWeekly Downloads

    472

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    54.2 kB

    Total Files

    64

    Last publish

    Collaborators

    • imodeljs
    • colinkerr