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

npm install @stihl-design-system/components

2. Font faces

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

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

3. CSS Reset

It is required to use the CSS Reset partial

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 package according to the Compatibility table

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

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

Useful Links

Figma Library Open in Figma