https://github.com/itwin/itwinui-layouts

iTwinUI-layouts places given React components accordingly within the page with minimal effort on the development side.
https://github.com/itwin/itwinui-layouts

layouts library react reactjs ui ui-components

Last synced: 3 months ago
JSON representation

iTwinUI-layouts places given React components accordingly within the page with minimal effort on the development side.

• Host: GitHub
• URL: https://github.com/itwin/itwinui-layouts
• Owner: iTwin
• License: mit
• Created: 2022-01-27T13:31:42.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-24T13:06:51.000Z (5 months ago)
• Last Synced: 2024-11-03T17:03:42.830Z (3 months ago)
• Topics: layouts, library, react, reactjs, ui, ui-components
• Language: TypeScript
• Homepage: https://itwin.github.io/iTwinUI-layouts
• Size: 27.5 MB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        


  

    

    

  



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

  



[![Build status](https://github.com/iTwin/iTwinUI-layouts/actions/workflows/build.yml/badge.svg?branch=main)](https://github.com/iTwin/iTwinUI-layouts/actions/workflows/build.yml?query=branch%3Amain)





  

  [Key features](#key-features) • [Installation](#Installation) • [Usage](#Usage) • [Contributing](#contributing)




## Key features

iTwinUI-layouts places given React (eg. [iTwinUI-react](https://github.com/iTwin/iTwinUI/)) 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

```css

// app.css

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

```

```html



  


    

  

  


    

  

  


    

  



```


#### React package

Import layouts CSS in your root component then the layouts component you want and start using it!

```jsx

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

import { PageLayout } from '@itwin/itwinui-layouts-react';

const App = () => (

  

    {/* Your header code */}

    

      {/* Add side navigation here */}

    

    {/* Main page content goes here */}

  

);

```

---

## Contributing

We welcome you to contribute and make this layouts library better. You can submit feature requests or bugs by creating an [issue](https://github.com/iTwin/iTwinUI-layouts/issues).

Please read our [CONTRIBUTING.md](https://github.com/iTwin/iTwinUI-layouts/blob/main/CONTRIBUTING.md) for more information.