Skip to Content

Getting started

For developers


iTwinUI is offered primarily as a set of React components that work with React v17 and above. Start by installing @itwin/itwinui-react using your package manager of choice.

Terminal window
npm add @itwin/itwinui-react


Wrap your application entrypoint in ThemeProvider and import styles.css.

import { ThemeProvider } from '@itwin/itwinui-react';
import '@itwin/itwinui-react/styles.css';
export default function App() {
return (
<>{/* Your components go here. */}</>

For more details, check out the ThemeProvider documentation.


After setting up ThemeProvider and styles, you can start using the components you want by importing them from the top-level @itwin/itwinui-react module.

import { Button } from '@itwin/itwinui-react';
const Page = () => <Button>Hello!</Button>;

Check out this template for a live interactive demo:

Edit in StackBlitz


This documentation is for the latest version of iTwinUI (v3). If you’re using an older version of iTwinUI, we highly recommend upgrading (see migration guide). In the meantime, you might find these links useful:

For designers

UI kit

Download the iTwinUI design kits and start creating experiences. These UI kits are available via the iTwinUI Figma Community page.


iTwinUI uses the Noto Sans font family, created in collaboration by Adobe and Google. We suggest these two methods of downloading the font family:

  • If you use Adobe Creative Cloud, you can sync the fonts using Adobe Fonts.
  • If you do not use Adobe Creative Cloud, you can download the files from Google Fonts.