iTwinUI-react

iTwinUI-react is a library built on top of the iTwinUI library. The goal of this project is to provide React components for using the styles and components from the core iTwinUI project.

f636b75702e706e67

View Demo View Github

Installation

npm install @itwin/itwinui-react

yarn add @itwin/itwinui-react

Usage

Import the component you want and start using it!

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

const App = () => (
  <Button>Hello!</Button>
);

Yes, that's really all you need as you can see in this live interactive demo:

Edit Button

Theming

By default, all components use the light theme but we also provide support for switching to dark theme in two different ways:

  • Use ThemeProvider in your root component where you can pass one of the following values:
    • light (default)
    • dark
    • os (which respects the color scheme of the operating system)
import { ThemeProvider } from '@itwin/itwinui-react';

const App = () => (
  <>
    <ThemeProvider theme='dark' />
    // Your code goes here.
  </>
);
  • The useTheme hook also provides the same functionality as ThemeProvider.
import { useTheme } from '@itwin/itwinui-react';

const App = () => {
  useTheme('dark');
  return (
    <>
      // Your code goes here.
    </>
  );
};

Note: You only need to use one of these methods, and it only needs to be done once.