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
🆕 iTwinUI v3 is now available! To upgrade from an older version, check out the v3 migration guide.
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.