Siemens IX Design System

https://ix.siemens.io/docs/
Admin
The Siemens IX Design System is a comprehensive collection of components and guidelines designed to...
Tokens:766,345
Snippets:6,341
Trust Score:4.9
Update:48 minutes ago
Show doc for...
Tokens:
Raw
### Install dependencies and start dev server

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

After scaffolding, run these commands from the generated project folder to install dependencies and start the development server.

```bash
cd my-ix-react-app
pnpm install
pnpm dev
```

--------------------------------

### Vue Date Input Label Example

Source: https://ix.siemens.io/docs/components/input-date/code.md

Vue component for the date input label example. It uses the script setup syntax and imports IxDateInput from '@siemens/ix-vue'.

```vue
<script setup lang="ts">
import { IxDateInput } from '@siemens/ix-vue';
</script>

<template>
  <IxDateInput
    label="Begin"
    name="begin"
    helper-text="Some helper text"
    value="2026/02/08"
  ></IxDateInput>
</template>
```

--------------------------------

### Run initial MCP server setup

Source: https://ix.siemens.io/docs/home/mcp-server

Initialize the MCP server configuration. Run this command in the root of every project where you want to use the MCP server.

```bash
npx @siemens/ix-mcp init
```

--------------------------------

### Vue: IxInput with start and end slots

Source: https://ix.siemens.io/docs/components/input/code.md

Vue component using script setup with TypeScript. Imports iconBulb and the Ix components, then places an icon in the 'start' slot and typography in the 'end' slot.

```vue
<script setup lang="ts">
import { iconBulb } from '@siemens/ix-icons/icons';
import { IxInput, IxIcon, IxTypography } from '@siemens/ix-vue';
</script>

<template>
  <IxInput>
    <IxIcon :name="iconBulb" slot="start" size="16"></IxIcon>
    <IxTypography slot="end">unit</IxTypography>
  </IxInput>
</template>
```

--------------------------------

### Scaffold React starter app with npx

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

Use this command to scaffold the React starter app into a new folder named 'my-ix-react-app' using npx degit.

```bash
npx degit siemens/ix-starter/apps/react-starter my-ix-react-app
```

--------------------------------

### Navigate to project directory

Source: https://ix.siemens.io/docs/home/mcp-server

Change to the project directory where the MCP server will be used.

```bash
cd your-project
```

--------------------------------

### Vue datetime-range.vue

Source: https://ix.siemens.io/docs/components/range-field/code.md

Vue example using IxRangeField and IxDatetimeInput from '@siemens/ix-vue'. Uses script setup with TypeScript.

```vue
<script setup lang="ts">
import { IxDatetimeInput, IxRangeField } from '@siemens/ix-vue';
</script>

<template>
  <IxRangeField
    type="datetime-range"
    style="width: 32rem"
    aria-label="Datetime range"
  >
    <IxDatetimeInput label="Start date and time"></IxDatetimeInput>
    <IxDatetimeInput label="End date and time"></IxDatetimeInput>
  </IxRangeField>
</template>
```

--------------------------------

### Run MCP server setup when token is already configured

Source: https://ix.siemens.io/docs/home/mcp-server

Use this command if the access token is already set up. It configures the MCP server without prompting for the token.

```bash
npx @siemens/ix-mcp setup
```

--------------------------------

### React time-range.tsx

Source: https://ix.siemens.io/docs/components/range-field/code.md

React example using IxRangeField with type 'time-range' and two IxTimeInput components for start and end time.

```tsx
import { IxRangeField, IxTimeInput } from '@siemens/ix-react';

export default () => {
  return (
    <IxRangeField
      type="time-range"
      style={{ width: '32rem' }}
      aria-label="Time range"
    >
      <IxTimeInput label="Start time"></IxTimeInput>
      <IxTimeInput label="End time"></IxTimeInput>
    </IxRangeField>
  );
};
```

--------------------------------

### Vue application-breakpoints.vue

Source: https://ix.siemens.io/docs/components/application/code.md

Vue single-file component for the breakpoint example. It uses script setup for imports and a separate script block for data and methods, with a template that mirrors the Angular example using Ix components and a radio group to change the breakpoint.

```Vue
<script setup lang="ts">
import type { Breakpoint } from '@siemens/ix';
import {
  IxApplication,
  IxApplicationHeader,
  IxAvatar,
  IxContent,
  IxContentHeader,
  IxDropdownButton,
  IxDropdownItem,
  IxMenu,
  IxMenuItem,
  IxRadio,
  IxRadioGroup,
} from '@siemens/ix-vue';
</script>

<script lang="ts">
const validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);

export default {
  data(): {
    breakpoints: Breakpoint[];
  } {
    return {
      breakpoints: ['md'],
    };
  },
  methods: {
    setBreakpoint(event: CustomEvent<Breakpoint>) {
      const value = event?.detail;
      if (validBreakpoints.has(value)) {
        this.breakpoints = [value];
      }
    },
  },
};
</script>

<template>
  <IxApplication :breakpoints="breakpoints">
    <IxApplicationHeader name="My Application">
      <div className="placeholder-logo" slot="logo"></div>

      <IxDropdownButton variant="subtle-tertiary" label="Select config">
        <IxDropdownItem label="Config 1"></IxDropdownItem>
        <IxDropdownItem label="Config 2"></IxDropdownItem>
        <IxDropdownItem label="Config 3"></IxDropdownItem>
      </IxDropdownButton>

      <IxAvatar>
        <IxDropdownItem label="Action 1"></IxDropdownItem>
        <IxDropdownItem label="Action 2"></IxDropdownItem>
        <IxDropdownItem label="Action 3"></IxDropdownItem>
      </IxAvatar>
    </IxApplicationHeader>

    <IxMenu>
      <IxMenuItem>Item 1</IxMenuItem>
      <IxMenuItem>Item 2</IxMenuItem>
    </IxMenu>

    <IxContent>
      <IxContentHeader
        slot="header"
        header-title="Choose breakpoint"
      ></IxContentHeader>
      <IxRadioGroup :value="breakpoints[0]" @valueChange="setBreakpoint">
        <IxRadio value="sm" label="Small" aria-label="Small"></IxRadio>
        <IxRadio value="md" label="Medium" aria-label="Medium"></IxRadio>
        <IxRadio value="lg" label="Large" aria-label="Large"></IxRadio>
      </IxRadioGroup>
    </IxContent>
  </IxApplication>
</template>
```

--------------------------------

### React Example

Source: https://ix.siemens.io/docs/components/kpi/code.md

Example of using the IxKpi component in a React application.

```APIDOC
## React Example

### Description
Example of using the IxKpi component in a React application.

### Code
```tsx
import './kpi.scoped.css';

import { IxKpi } from '@siemens/ix-react';

export default () => {
  return (
    <div className="kpi">
      <IxKpi label="Motor speed" value="Nominal"></IxKpi>
      <IxKpi label="Motor speed" value="{122.6}" unit="rpm"></IxKpi>
      <IxKpi label="Motor speed" value="{122.6}" state="alarm"></IxKpi>
      <IxKpi label="Motor speed" value="{122.6}" state="warning"></IxKpi>

      <IxKpi label="Motor speed" value="Nominal" orientation="vertical"></IxKpi>
      <IxKpi
        label="Motor speed"
        value="{122.6}"
        unit="rpm"
        state="alarm"
        orientation="vertical"
      ></IxKpi>
    </div>
  );
};
```

### CSS
```css
.kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  max-width: 20rem;
}

.kpi > ix-kpi {
  margin: 0.5rem;
}
```
```

--------------------------------

### Scaffold React starter app with pnpx

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

Use this command to scaffold the React starter app into a new folder named 'my-ix-react-app' using pnpx degit.

```bash
pnpx degit siemens/ix-starter/apps/react-starter my-ix-react-app
```

--------------------------------

### Vue category-filter.vue example

Source: https://ix.siemens.io/docs/components/category-filter/code.md

Vue component using IxCategoryFilter with script setup and TypeScript. Sets uniqueCategories to false and uses LogicalFilterOperator.NOT_EQUAL.

```vue
<script setup lang="ts">
import { FilterState, LogicalFilterOperator } from '@siemens/ix';
import { IxCategoryFilter } from '@siemens/ix-vue';

const filter: FilterState = {
  tokens: ['Custom filter text'],
  categories: [
    {
      id: 'ID_1',
      value: 'IBM',
      operator: LogicalFilterOperator.NOT_EQUAL,
    },
  ],
};

const categories = {
  ID_1: {
    label: 'Vendor',
    options: ['Apple', 'MS', 'Siemens'],
  },
  ID_2: {
    label: 'Product',
    options: ['iPhone X', 'Windows', 'APS'],
  },
};
</script>

<template>
  <IxCategoryFilter
    placeholder="Filter by"
    :uniqueCategories="false"
    :filterState="filter"
    :categories="categories"
  ></IxCategoryFilter>
</template>
```

--------------------------------

### React date-range.tsx

Source: https://ix.siemens.io/docs/components/range-field/code.md

React example using IxRangeField with type 'date-range' and two IxDateInput components for start and end dates. Imports from '@siemens/ix-react'.

```tsx
import { IxDateInput, IxRangeField } from '@siemens/ix-react';

export default () => {
  return (
    <IxRangeField
      type="date-range"
      style={{ width: '32rem' }}
      aria-label="date range"
    >
      <IxDateInput label="Start date"></IxDateInput>
      <IxDateInput label="End date"></IxDateInput>
    </IxRangeField>
  );
};
```

--------------------------------

### show

Source: https://ix.siemens.io/docs/components/toast/code.md

Shows the toast with the given configuration.

```APIDOC
## show(config: ToastConfig)

### Description
Shows the toast.

### Method
`show(config: ToastConfig): Promise<ShowToastResult>`

### Parameters
- **config** (ToastConfig) - Required - The configuration for the toast.

### Returns
- **Promise<ShowToastResult>** - A promise that resolves with the result of showing the toast.
```

--------------------------------

### Module setup (legacy) with IxModule.forRoot()

Source: https://ix.siemens.io/docs/home/installation/angular.md

Legacy module setup: import IxModule and BrowserAnimationsModule in your application module. Optionally include RouterModule.forRoot() if routing is needed. Use IxModule.forRoot() in the imports array.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IxModule } from '@siemens/ix-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, IxModule.forRoot(), BrowserAnimationsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

--------------------------------

### Vue time-input-with-slots.vue

Source: https://ix.siemens.io/docs/components/input-time/code.md

Vue example using IxTimeInput with start and end slots. Imports iconBulb from @siemens/ix-icons/icons and IxTimeInput, IxIcon, IxTypography from @siemens/ix-vue.

```vue
<script setup lang="ts">
import { iconBulb } from '@siemens/ix-icons/icons';
import { IxTimeInput, IxIcon, IxTypography } from '@siemens/ix-vue';
</script>

<template>
  <IxTimeInput>
    <IxIcon :name="iconBulb" slot="start" size="16"></IxIcon>
    <IxTypography slot="end">Slot</IxTypography>
  </IxTimeInput>
</template>
```

--------------------------------

### Scaffold Angular starter app with npx

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

Use this command to scaffold the Angular starter app into a new folder named 'my-ix-angular-app' using npx degit.

```bash
npx degit siemens/ix-starter/apps/angular-starter my-ix-angular-app
```

--------------------------------

### React time-input-with-slots.tsx

Source: https://ix.siemens.io/docs/components/input-time/code.md

React example using IxTimeInput with start and end slots. Imports IxTimeInput, IxIcon, IxTypography from @siemens/ix-react and iconBulb from @siemens/ix-icons/icons.

```tsx
import { IxTimeInput, IxIcon, IxTypography } from '@siemens/ix-react';
import { iconBulb } from '@siemens/ix-icons/icons';

export default () => {
  return (
    <IxTimeInput>
      <IxIcon name={iconBulb} slot="start" size="16"></IxIcon>
      <IxTypography slot="end">Slot</IxTypography>
    </IxTimeInput>
  );
};
```

--------------------------------

### Vue number-input-with-slots.vue

Source: https://ix.siemens.io/docs/components/input-number/code.md

Vue example using IxNumberInput with start and end slots. Imports iconBulb from '@siemens/ix-icons/icons' and IxIcon, IxNumberInput, IxTypography from '@siemens/ix-vue'.

```vue
<script setup lang="ts">
import { iconBulb } from '@siemens/ix-icons/icons';
import { IxIcon, IxNumberInput, IxTypography } from '@siemens/ix-vue';
</script>

<template>
  <IxNumberInput>
    <IxIcon :name="iconBulb" slot="start" size="16"></IxIcon>
    <IxTypography slot="end">unit</IxTypography>
  </IxNumberInput>
</template>
```

--------------------------------

### Scaffold Vue starter app with npx

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

Use this command to scaffold the Vue starter app into a new folder named 'my-ix-vue-app' using npx degit.

```bash
npx degit siemens/ix-starter/apps/vue-starter my-ix-vue-app
```

--------------------------------

### React number-input-with-slots.tsx

Source: https://ix.siemens.io/docs/components/input-number/code.md

React example using IxNumberInput with start and end slots. Imports IxIcon, IxNumberInput, IxTypography from '@siemens/ix-react' and iconBulb from '@siemens/ix-icons/icons'.

```tsx
import { IxIcon, IxNumberInput, IxTypography } from '@siemens/ix-react';
import { iconBulb } from '@siemens/ix-icons/icons';

export default () => {
  return (
    <IxNumberInput>
      <IxIcon name={iconBulb} slot="start" size="16"></IxIcon>
      <IxTypography slot="end">unit</IxTypography>
    </IxNumberInput>
  );
};
```

--------------------------------

### React Example

Source: https://ix.siemens.io/docs/components/popover-news/code.md

Example usage of the ix-menu-about-news component in a React application.

```APIDOC
## React Example

### Description
Example usage of the ix-menu-about-news component in a React application.

### Code
```tsx
import {
  IxApplication,
  IxApplicationHeader,
  IxMenu,
  IxMenuAbout,
  IxMenuAboutItem,
  IxMenuAboutNews,
} from '@siemens/ix-react';

export default () => {
  return (
    <IxApplication>
      <IxApplicationHeader>
        <div className="placeholder-logo" slot="logo"></div>
      </IxApplicationHeader>
      <IxMenu>
        <IxMenuAbout activeTabKey="tab-1">
          <IxMenuAboutItem tabKey="tab-1" label="Example">
            {' '}
          </IxMenuAboutItem>
        </IxMenuAbout>
        <IxMenuAboutNews label="Test" show activeAboutTabKey="tab-1">
          Test
        </IxMenuAboutNews>
      </IxMenu>
    </IxApplication>
  );
};
```
```

--------------------------------

### Angular slider-error.ts

Source: https://ix.siemens.io/docs/components/slider/code.md

Angular component class for the slider error example. It uses the default (non-standalone) component setup with a templateUrl pointing to 'slider-error.html'.

```ts
import { Component } from '@angular/core';

@Component({
  standalone: false,
  selector: 'app-example',
  templateUrl: './slider-error.html',
})
export default class SliderError {}
```

--------------------------------

### Vue settings.vue example using IxMenuSettings with tabs

Source: https://ix.siemens.io/docs/components/settings/code.md

Shows a Vue 3 script setup component that toggles the settings menu open on mount and manages active tab state. The template uses IxApplication, IxApplicationHeader, IxMenu, IxMenuSettings, IxTabs, and IxTabItem. The active tab is controlled via the activeTabKey ref and the tabChange event.

```Vue
<script setup lang="ts">
import {
  HTMLRefElement,
  IxApplication,
  IxApplicationHeader,
  IxMenu,
  IxMenuSettings,
  IxTabItem,
  IxTabs,
} from '@siemens/ix-vue';
import { nextTick, onMounted, ref } from 'vue';

const menu = ref<HTMLRefElement<HTMLIxMenuElement>>();
const activeTabKey = ref('tab-1');

const setActiveTabKey = (event: CustomEvent<string | undefined>) => {
  activeTabKey.value = event.detail ?? 'tab-1';
};

onMounted(async () => {
  await nextTick();
  menu.value?.$el.toggleSettings(true);
});
</script>

<template>
  <IxApplication>
    <IxApplicationHeader>
      <div className="placeholder-logo" slot="logo"></div>
    </IxApplicationHeader>
    <IxMenu ref="menu">
      <IxMenuSettings>
        <IxTabs :activeTabKey="activeTabKey" @tabChange="setActiveTabKey">
          <IxTabItem tabKey="tab-1">Example Setting 1</IxTabItem>
          <IxTabItem tabKey="tab-2">Example Setting 2</IxTabItem>
        </IxTabs>
        <section
          v-if="activeTabKey === 'tab-1'"
          role="tabpanel"
          aria-label="Settings content"
        >
          Example Setting 1 content
        </section>
        <section
          v-if="activeTabKey === 'tab-2'"
          role="tabpanel"
          aria-label="Settings content"
        >
          Example Setting 2 content
        </section>
      </IxMenuSettings>
    </IxMenu>
  </IxApplication>
</template>
```

--------------------------------

### Setup LLM token

Source: https://ix.siemens.io/docs/home/mcp-server

Run the setup-token command to set or update only the LLM token in the system keychain. This token is used to generate embeddings for semantic search.

```bash
npx @siemens/ix-mcp setup-token
```

--------------------------------

### Disabled link button in Vue (link-button-disabled.vue)

Source: https://ix.siemens.io/docs/components/link-button/code.md

Use this Vue example to render a disabled ix-link-button. Import IxLinkButton from '@siemens/ix-vue' in the script setup.

```vue
<script setup lang="ts">
import { IxLinkButton } from '@siemens/ix-vue';
</script>

<template>
  <IxLinkButton url="https://ix.siemens.io/" disabled>Link text</IxLinkButton>
</template>
```

--------------------------------

### Basic link button in Vue (link-button.vue)

Source: https://ix.siemens.io/docs/components/link-button/code.md

Use this Vue example to render a basic ix-link-button. Import IxLinkButton from '@siemens/ix-vue' in the script setup.

```vue
<script setup lang="ts">
import { IxLinkButton } from '@siemens/ix-vue';
</script>

<template>
  <IxLinkButton url="https://ix.siemens.io/">Link text</IxLinkButton>
</template>
```

--------------------------------

### Scaffold Vue starter app with pnpx

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

Use this command to scaffold the Vue starter app into a new folder named 'my-ix-vue-app' using pnpx degit.

```bash
pnpx degit siemens/ix-starter/apps/vue-starter my-ix-vue-app
```

--------------------------------

### Compact (Vue)

Source: https://ix.siemens.io/docs/components/event-list/code.md

Vue example using IxEventList with the compact prop and four IxEventListItem components. The script setup imports the components from @siemens/ix-vue.

```vue
<script setup lang="ts">
import { IxEventList, IxEventListItem } from '@siemens/ix-vue';
</script>

<template>
  <IxEventList compact>
    <IxEventListItem itemColor="color-primary">Text 1</IxEventListItem>
    <IxEventListItem itemColor="color-primary">Text 2</IxEventListItem>
    <IxEventListItem itemColor="color-primary">Text 3</IxEventListItem>
    <IxEventListItem itemColor="color-primary">Text 4</IxEventListItem>
  </IxEventList>
</template>
```

--------------------------------

### Vue Example

Source: https://ix.siemens.io/docs/components/kpi/code.md

Example of using the IxKpi component in a Vue application.

```APIDOC
## Vue Example

### Description
Example of using the IxKpi component in a Vue application.

### Code
```vue
<script setup lang="ts">
import { IxKpi } from '@siemens/ix-vue';
</script>

<style scoped src="./kpi.css"></style>

<template>
  <div class="kpi">
    <IxKpi label="Motor speed" value="Nominal"></IxKpi>
    <IxKpi label="Motor speed" value="122.6" unit="rpm"></IxKpi>
    <IxKpi label="Motor speed" value="122.6" state="alarm"></IxKpi>
    <IxKpi label="Motor speed" value="122.6" state="warning"></IxKpi>

    <IxKpi label="Motor speed" value="Nominal" orientation="vertical"></IxKpi>
    <IxKpi
      label="Motor speed"
      value="122.6"
      unit="rpm"
      state="alarm"
      orientation="vertical"
    ></IxKpi>
  </div>
</template>
```

### CSS
```css
.kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  max-width: 20rem;
}

.kpi > ix-kpi {
  margin: 0.5rem;
}
```
```
Tokens:
Raw