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: 6 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 (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-11T15:58:31.000Z (6 months ago)
- Last Synced: 2025-04-11T16:59:29.970Z (6 months ago)
- Topics: layouts, library, react, reactjs, ui, ui-components
- Language: TypeScript
- Homepage: https://itwin.github.io/iTwinUI-layouts
- Size: 28.8 MB
- Stars: 6
- Watchers: 3
- Forks: 0
- 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.
[](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.