# Web components
> Web components are a set of web platform APIs that allow you to create reusable and encapsulated custom elements. This section guides you through the steps to install and set up our design system using web components, ensuring a straightforward and flexible integration process.
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
#
## Library installation
Install `@siemens/ix` and `@siemens/ix-icons` using a package manager:
```
npm install @siemens/ix @siemens/ix-icons
```
```
yarn add @siemens/ix @siemens/ix-icons
```
```
pnpm add @siemens/ix @siemens/ix-icons
```
## Build
There are several different possibilities to build and serve web apps with the library.
In the following section we will describe how you can build an application with [vite](https://vitejs.dev/guide/).
`index.html`
```html
Vite App
Button
Button
```
`main.js`
```javascript
import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
import { defineCustomElements } from '@siemens/ix/loader';
import { defineCustomElements as defineIxIconCustomElement } from '@siemens/ix-icons/loader';
(async () => {
defineIxIconCustomElement();
defineCustomElements();
})();
```