# STIHL Design System

Welcome to the STIHL Design System react component library.

**Please consult the official documentation here:**

https://designsystem.stihl.de/

## Install

To use the STIHL Design System components in your react application please follow these steps:

### 1. Package installation

Install the STIHL Design System components package by running

```bash
npm install @stihl-design-system/components
```

### 2. Font faces

It is required to import the font faces inside your global `.scss` file like
so:

```css
@import '@stihl-design-system/components/styles/fonts/font-face.min.css';
```

### 3. CSS Reset

It is required to use the CSS Reset partial

```tsx
import { getResetStyles } from '@stihl-design-system/components/partials';

// Use getResetStyles() according to your framework - see CSS Reset Partial docs
```

### Using Next.js with Pages Router

If you are using Next.js < 14 with Pages Router another step is necessary for the STIHL Design System dependency to be transpiled.

Install the [next-transpile-modules](https://github.com/martpie/next-transpile-modules) package according to the [Compatibility table](https://github.com/martpie/next-transpile-modules?tab=readme-ov-file#compatibility-table)

Then use it like this in your `next.config.js`:

```js
const withTM = require('next-transpile-modules')([
  '@stihl-design-system/components',
]);
```

## Useful Links

Figma Library [Open in Figma](https://www.figma.com/files/908780125202366131/team/981845005644277861/Design-System)