@itwin/itwinui-react

iTwinUI-react

What is iTwinUI-react?

iTwinUI-react is a React component library for iTwinUI. The goal of this package is to provide React components that make it easier to use the styles from @itwin/itwinui-css. Check out the demo website to see the components in action.

---

🆕 iTwinUI v3 is now available! To upgrade from an older version, check out the v3 migration guide.

---

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:

---

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)

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

const App = () => (
  <>
    <ThemeProvider theme='dark'>
      {/* Your components go here. */}
    </ThemeProvider>
  </>
);

---

FAQ

For a list of frequently asked questions, visit the wiki.

---

Contributing

We welcome you to contribute and make this UI design system better. You can submit feature requests or bugs by creating an issue. Please read our CONTRIBUTING.md for more information.

---

Changelog

Read our CHANGELOG.md to find recent changes.