Welcome to the STIHL Design System react component library.
Please consult the official documentation here:
https://main--63440bbb95889041542a5ba3.chromatic.com
@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
To use the STIHL Design System components in your react application please follow these steps:
Install the STIHL Design System components package by running
npm install @stihl-design-system/components
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';
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
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',
]);
Figma Library Open in Figma