Porsche Design System

Introduction

Table of Contents

Setup
Individual Imports

Setup#

As of Porsche Design System v4, global styles are required. When you import the main package CSS file, all styles are included:

/* Replace {js|angular|react|vue} with your framework, e.g. components-react */
@import '@porsche-design-system/components-{js|angular|react|vue}';

/* Alternative: If your bundler requires an explicit .css extension, use this path instead */
@import '@porsche-design-system/components-{js|angular|react|vue}/index.css';

This includes:

Individual Imports#

If you only need specific styles, you can import each stylesheet separately for more granular control. Note that variables.css and font-face.css are required — components will not render correctly without them.

/* Replace {js|angular|react|vue} with your framework, e.g. components-react */
@import '@porsche-design-system/components-{js|angular|react|vue}/variables.css';
@import '@porsche-design-system/components-{js|angular|react|vue}/font-face.css';
@import '@porsche-design-system/components-{js|angular|react|vue}/normalize.css';
@import '@porsche-design-system/components-{js|angular|react|vue}/color-scheme.css';