@itwin/itwinui-react
TypeScript icon, indicating that this package has built-in type declarations

3.11.0 • Public • Published

iTwinUI logo

iTwinUI-react

itwinui-react on npm Build status

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 documentation website to detailed documentation and examples of all components.

🆕 Check out the v3 migration guide if you're upgrading from an older version.


Installation

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>
    </>
  );
}

ThemeProvider has a theme prop which accepts one of the following values:

  • "light"
  • "dark"
  • "os" (respects the color scheme of the operating system)
  • "inherit" (default)

Usage

After setting up ThemeProvider and styles, import the component you want and start using it!

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

const Page = () => (
  <Button>Hello!</Button>
);

Check out this template for a live interactive demo:

Edit in StackBlitz


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.

Package Sidebar

Install

npm i @itwin/itwinui-react

Weekly Downloads

20,252

Version

3.11.0

License

MIT

Unpacked Size

2.94 MB

Total Files

1079

Last publish

Collaborators

  • wgoehrig
  • cshafer
  • aruniverse
  • imodeljs
  • colinkerr