Porsche Design System

Porsche Design System is a component library of Web Components, published by Dr. Ing. h.c. F. Porsche AG as versioned npm packages. The core package is @porsche-design-system/components-js, and wrapper packages for React, Angular and Vue are published beside it, so the same components can be used from each framework or from plain JavaScript.

Installation is an npm install followed by a loader script in the page and a stylesheet import, and the vanilla JavaScript guide shows the steps in a Vite project. The project describes its packages as typed with TypeScript and as supporting server-side rendering. Styling can come from the design system’s own stylesheet or from its Tailwind CSS, SCSS, Emotion or Vanilla Extract integrations.

Worth knowing

The source code is under the Apache License, Version 2.0. The design assets, which include fonts, icons and the marque, fall under a separate Porsche Design System Assets License Agreement that grants use of them for software applications, websites and interfaces on behalf of Porsche.