Porsche Design System

Vanilla Js

Table of Contents

Quick start
Integration

Quick start#

To build a Vanilla JS application using the Porsche Design System, follow these steps. This guide is based on the following dependencies:

vite@7

tailwindcss@4

@porsche-design-system/components-js@3

# Create a new application by executing:
npm create vite@latest my-app -- --template vanilla-ts

You're all set! Start building your own application now.

Integration#

Step 1

Install the Porsche Design System within your project directory.

npm install @porsche-design-system/components-js

Step 2

Create a vite.config.ts file in your project directory and integrate the Porsche Design System Loader into the <body> section of your HTML.

// vite.config.ts

import { defineConfig } from 'vite';
import { getLoaderScript } from '@porsche-design-system/components-js/partials';

const transformIndexHtmlPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html: string) {
      const bodyPartials = [getLoaderScript()].join('');

      return html.replace(/<\/body>/, `${bodyPartials}$&`);
    },
  };
};

export default defineConfig({
  plugins: [transformIndexHtmlPlugin()],
});

Step 3 (recommended)

To boost your web application's performance and minimize issues like FOUC (Flash of Unstyled Content) and FOUT (Flash of Unstyled Text), you can integrate Partials from the Porsche Design System into the <head> section of your HTML.

// vite.config.ts

import { defineConfig } from 'vite';
import {
  getLoaderScript,
  getComponentChunkLinks,
  getFontFaceStyles,
  getFontLinks,
  getIconLinks,
  getInitialStyles,
  getMetaTagsAndIconLinks,
} from '@porsche-design-system/components-js/partials';

const transformIndexHtmlPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html: string) {
      const headPartials = [
        // injects stylesheet which defines visibility of pre-hydrated PDS components
        getInitialStyles(),
        // injects stylesheet which defines Porsche Next CSS font-face definition (=> minimize FOUT)
        getFontFaceStyles(),
        // preloads Porsche Next font (=> minimize FOUT)
        getFontLinks(),
        // preloads PDS component core chunk from CDN for PDS component hydration (=> improve loading performance)
        getComponentChunkLinks(),
        // preloads Porsche icons (=> minimize FOUC)
        getIconLinks(),
        // injects favicon, apple touch icons, android touch icons, etc.
        getMetaTagsAndIconLinks({ appTitle: 'Porsche' }),
      ].join('');

      const bodyPartials = [getLoaderScript()].join('');

      return html.replace(/<\/head>/, `${headPartials}$&`).replace(/<\/body>/, `${bodyPartials}$&`);
    },
  };
};

export default defineConfig({
  plugins: [transformIndexHtmlPlugin()],
});

Step 4 (recommended)

Setting up Tailwind CSS with the Porsche Design System Tailwind CSS Theme allows you to leverage a utility-first CSS framework while maintaining seamless styling consistency with Porsche's design principles. This integration enables you to use the provided Patterns and Templates, all written in Tailwind CSS, to build your application quickly and efficiently.

Install Tailwind CSS within your project directory.

npm install tailwindcss @tailwindcss/vite

Configure the Vite Tailwind CSS plugin.

// vite.config.ts

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

const transformIndexHtmlPlugin = () => { … }

export default defineConfig({
  plugins: [transformIndexHtmlPlugin(), tailwindcss()],
});

Import Tailwind CSS and the Porsche Design System Tailwind CSS Theme.

/* src/style.css */

@import 'tailwindcss';
@import '@porsche-design-system/components-js/tailwindcss';

Step 5

Add a Porsche Design System component (e.g., <p-wordmark></p-wordmark>) with some Tailwind CSS styles. Then, run npm run dev and verify that the component and styles display correctly.

// src/main.ts

import './style.css';

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div class="grid justify-items-center gap-fluid-md m-static-lg p-fluid-lg bg-surface rounded-lg">
    <p-wordmark></p-wordmark>
    <h1 class="prose-display-md">Porsche Design System</h1>
  </div>
  <div class="…">…</div>
`;