An open-source design system that helps us build a unified web experience.
iTwinUI is a design system for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications. It supports light and dark color schemes and also comes with high contrast versions of both.
iTwinUI consists of the following packages:
@itwin/itwinui-css- the CSS for every component as well as some global styles@itwin/itwinui-variables- CSS variables for iTwinUI's design tokens@itwin/itwinui-react- react components that consume@itwin/itwinui-css
Caution
iTwinUI is now in maintenance mode per the support policy, with StrataKit replacing it as the primary design system. To switch, review the migration guide. If you need to run both libraries simultaneously in the same UI, see the theme bridge documentation.
The easiest way to get started with iTwinUI is by using React components from @itwin/itwinui-react:
import { ThemeProvider, Button } from '@itwin/itwinui-react';
import '@itwin/itwinui-react/styles.css';
export default function App() {
return (
<>
<ThemeProvider theme='light'>
<Button>Hello!</Button>
</ThemeProvider>
</>
);
}For more details, check out the iTwinUI documentation website.
Are you interested in helping iTwinUI grow and expand? You can submit feature requests or bugs by creating issues. Please read our CONTRIBUTING.md for more information.