@stihl-design-system/components

STIHL Design System

Welcome to the STIHL Design System react component library.

Please consult the official documentation here:

https://designsystem.stihl.de

Before you start

⚠️ If you were consuming a private version of our @stihl-design-system/components package, please remove the following lines from your global .npmrc file: ⚠️

  @stihl-design-system:registry=https://npm.pkg.github.com/
  //npm.pkg.github.com/:_authToken=THE_TOKEN_WE_PROVIDED

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 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