Getting started

For developers

Installation

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.

npm add @itwin/itwinui-react

Setup

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 (
    <ThemeProvider>
      <>{/* Your components go here. */}</>
    </ThemeProvider>
  );
}

For more details, check out the ThemeProvider documentation.

Usage

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:

Versioning

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:

• v1 storybook
• v2 storybook

For designers

UI kit

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

Fonts

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.