| ⚠️ The code for iTwinUI-react has been moved into iTwin/iTwinUI. This repo will no longer be updated. |
|---|
iTwinUI-react
[](https://www.npmjs.com/package/@itwin/itwinui-react)
[](https://github.com/iTwin/iTwinUI-react/actions/workflows/build.yml?query=branch%3Amain)
## What is iTwinUI-react?
iTwinUI-react is a library built on top of the [iTwinUI](https://github.com/iTwin/iTwinUI) library.
The goal of this project is to provide React components for using the styles and components from the core `iTwinUI` project. Check out the [demo website](https://itwin.github.io/iTwinUI-react) to see the components in action.
---
## Installation
```
npm install @itwin/itwinui-react
```
```
yarn add @itwin/itwinui-react
```
---
## Usage
Import the component you want and start using it!
```jsx
import { Button } from '@itwin/itwinui-react';
const App = () => (
);
```
Yes, that's really all you need as you can see in this live interactive demo:
[](https://codesandbox.io/s/itwinui-react-minimal-example-xq2t3)
---
## Theming
By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop:
- `light` (default)
- `dark`
- `os` (which respects the color scheme of the operating system)
```jsx
import { ThemeProvider } from '@itwin/itwinui-react';
const App = () => (
<>