Skip to main content

React

Ask AI
Copy a prompt to ask an AI assistant about this page.

React is a widely-used library for building user interfaces, particularly single-page applications. This section guides you through the steps to install and set up our design system within a React project, ensuring a seamless integration process.

React

Library installation​

Install @siemens/ix, @siemens/ix-react and @siemens/ix-icons using a package manager:

npm install @siemens/ix @siemens/ix-react @siemens/ix-icons

Apply theme​

@import '@siemens/ix/dist/siemens-ix/siemens-ix.css';

Set the data-ix-theme attribute of the <html> tag to the theme of choice (e.g. classic) and the corresponding data-ix-color-schema attribute to the value light, dark or system to set the color scheme. system will automatically apply the color scheme of the users’ operating system.

<html data-ix-theme="classic" data-ix-color-schema="dark">
  <!-- Framework related imports -->
  <!--  -->
  <body></body>
</html>