db-ux-design-system · mfranzke · Jul 28, 2025 · Jul 28, 2025 · Jul 28, 2025 · Jul 29, 2025
@@ -1,21 +1,26 @@
 ---
-name: "NPM Cache Action"
-description: "Initialize NPM Cache"
+name: "PNPM Cache Action"
+description: "Initialize PNPM Cache"
 inputs:
   nodeModulesPath:
     description: "Path for node_modules"
     required: false
     default: "**/node_modules"
   packageLockPath:
-    description: "Path for package-lock.json"
+    description: "Path for pnpm-lock.yaml"
     required: false
-    default: "**/package-lock.json"
+    default: "**/pnpm-lock.yaml"
   nodeVersion:
     description: "Node version"
     required: false
 runs:
   using: "composite"
   steps:
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        run_install: false
+
     - name: 🆙 Setup node
       # pick the Node version to use and install it
       # https://github.com/actions/setup-node
@@ -24,12 +29,13 @@ runs:
         # If node-version and node-version-file are both provided the action will use version from node-version.
         node-version: ${{ inputs.nodeVersion }}
         node-version-file: ".nvmrc"
+        cache: "pnpm"
 
-    - name: 🖼️ Display node and npm version
+    - name: 🖼️ Display node and pnpm version
       shell: bash
       run: |
         node --version
-        npm --version
+        pnpm --version
 
     - name: 🆒 Init Cache
       uses: actions/cache@v4
@@ -46,8 +52,8 @@ runs:
         HIT: ${{ steps.cache.outputs.cache-hit }}
       run: echo $HIT
 
-    - name: ⏬ NPM ci
+    - name: ⏬ PNPM install
       shell: bash
       if: steps.cache.outputs.cache-hit != 'true'
       run: |
-        npm ci
+        pnpm install
@@ -44,4 +44,4 @@ runs:
     - name: ⏬ Install Playwright's dependencies
       shell: bash
       if: steps.playwright-cache.outputs.cache-hit != 'true'
-      run: npx --no -- playwright install --with-deps ${{ env.BROWSERS }}
+      run: pnpm exec playwright install --with-deps ${{ env.BROWSERS }}
@@ -46,12 +46,10 @@ jobs:
           path: output
 
       - name: 📥 Install output dependencies
-        uses: bahmutov/npm-install@v1
-        with:
-          install-command: npm i
+        run: pnpm install
 
       - name: 🔨 Build outputs
-        run: npm run build-outputs
+        run: pnpm run build-outputs
 
       - name: ⏫ Upload outputs
         uses: actions/upload-artifact@v4

@@ -16,7 +16,7 @@ jobs:
         uses: ./.github/actions/npm-cache
 
       - name: 🔨 Build Packages
-        run: npm run build
+        run: pnpm run build
 
       - name: ⏫ Upload foundations build
         uses: actions/upload-artifact@v4

@@ -90,8 +90,8 @@ jobs:
           ASSET_PASSWORD: ${{ secrets.ASSET_PASSWORD }}
           NEXT_PUBLIC_BASE_PATH: ${{ steps.base-path.outputs.result }}
         run: |
-          npx --no tsx scripts/md-resolve-svg.ts
-          npm run build --workspace=patternhub
+          pnpm exec tsx scripts/md-resolve-svg.ts
+          pnpm --filter=patternhub run build
           echo "path=${NEXT_PUBLIC_BASE_PATH}" >> $GITHUB_OUTPUT
 
       - name: ⏫ Upload Patternhub

@@ -41,7 +41,7 @@ jobs:
         env:
           ASSET_INIT_VECTOR: ${{ secrets.ASSET_INIT_VECTOR }}
           ASSET_PASSWORD: ${{ secrets.ASSET_PASSWORD }}
-        run: npm run build --workspace=${{ inputs.showcase }}
+        run: pnpm --filter=${{ inputs.showcase }} run build
 
       - name: ⏫ Upload ${{ inputs.showcase }}
         uses: actions/upload-artifact@v4

@@ -24,7 +24,7 @@ jobs:
       - name: 🪁 Get playwright version
         id: version
         run: |
-          OUTPUT=$(npx --no tsx scripts/github/get-playwright-version.ts)
+          OUTPUT=$(pnpm exec tsx scripts/github/get-playwright-version.ts)
           echo "version=$OUTPUT" >> $GITHUB_OUTPUT
 
       - name: 💀 Killing me softly

@@ -33,7 +33,7 @@ jobs:
       - name: 💃🕺 Check if release or prerelease
         id: releaseCheck
         run: |
-          OUTPUT=$(npx --no tsx scripts/github/get-release.ts)
+          OUTPUT=$(pnpm exec tsx scripts/github/get-release.ts)
           if [[ $OUTPUT == "RELEASE" ]];
           then
             echo "release=true" >> $GITHUB_OUTPUT
@@ -59,7 +59,7 @@ jobs:
           PRE_RELEASE: ${{ steps.releaseCheck.outputs.preRelease }}
           TAG: ${{ steps.extractTag.outputs.tag }}
         run: |
-          OUTPUT=$(npx --no tsx scripts/github/package-version.ts)
+          OUTPUT=$(pnpm exec tsx scripts/github/package-version.ts)
           echo "version=$OUTPUT" >> $GITHUB_OUTPUT
 
       - name: 🌳 Log Valid Version

@@ -16,9 +16,9 @@ jobs:
 
       - name: ⚡ Run Lint
         run: |
-          npm run postinstall --workspace=nuxt-showcase
-          npm run build --workspace=@db-ux/core-stylelint
-          npm run lint
+          pnpm --filter=nuxt-showcase run postinstall
+          pnpm --filter=@db-ux/core-stylelint run build
+          pnpm run lint
 
       - name: 💀 Killing me softly
         uses: ./.github/actions/cancel-workflow

@@ -15,7 +15,7 @@ jobs:
         uses: ./.github/actions/npm-cache
 
       - name: ⚡ Run Test
-        run: npm run test
+        run: pnpm run test
 
       - name: 💀 Killing me softly
         uses: ./.github/actions/cancel-workflow

@@ -33,7 +33,7 @@ jobs:
 
       - name: 👩‍🔬 Test with Playwright 🎭
         working-directory: ./packages/foundations
-        run: npm run test:e2e
+        run: pnpm run test:e2e
 
       - name: 🆙 Upload test results
         if: failure()

@@ -60,13 +60,13 @@ jobs:
         run: |
           mkdir -p ./build-showcases${{ inputs.path }}
           cp -RT ./build-showcases/patternhub ./build-showcases${{ inputs.path }}
-          npm run test:e2e --workspace=patternhub
+          pnpm --filter=patternhub run test:e2e
 
       - name: 🔣 Print GitHub Report
         if: failure()
         shell: bash
         run: |
-          npx playwright merge-reports --reporter github ./blob-report
+          pnpm exec playwright merge-reports --reporter github ./blob-report
 
       - name: 🆙 Upload test results
         if: failure()

@@ -70,16 +70,16 @@ jobs:
           NEXT_PUBLIC_BASE_PATH: ${{ inputs.path }}
         run: |
           if [[ $TYPE == "components" ]]; then
-            npm run regenerate:screenshots --workspace=@db-ux/react-core-components
+            pnpm --filter=@db-ux/react-core-components run regenerate:screenshots
           elif [[ $TYPE == "foundations" ]]; then
-            npm run regenerate:screenshots --workspace=@db-ux/core-foundations
+            pnpm --filter=@db-ux/core-foundations run regenerate:screenshots
           elif [[ $TYPE == "patternhub" ]]; then
             mkdir --parents ./build-showcases${{ inputs.path }}
             cp --recursive --no-target-directory ./build-showcases/${{ inputs.type }} ./build-showcases${{ inputs.path }}
-            npm run regenerate:screenshots --workspace=patternhub
+            pnpm --filter=patternhub run regenerate:screenshots
           else
-            npm run regenerate:visual-snapshots --workspace=react-showcase
-            npm run regenerate:aria-snapshots --workspace=react-showcase
+            pnpm --filter=react-showcase run regenerate:visual-snapshots
+            pnpm --filter=react-showcase run regenerate:aria-snapshots
           fi
 
       - name: 🆙 Upload components

@@ -50,7 +50,7 @@ jobs:
         env:
           showcase: react-showcase
         run: |
-          npm run test-sr:${{ env.OS }} --workspace=react-showcase -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+          pnpm --filter=react-showcase run test-sr:${{ env.OS }} --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
 
       - name: 🆙 Upload test results
         if: failure()

@@ -81,33 +81,33 @@ jobs:
         env:
           NEXT_PUBLIC_BASE_PATH: ${{ inputs.path }}
         run: |
-          npm run test:e2e --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+          pnpm --filter=${{ inputs.showcase }} run test:e2e --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
 
       # We check if aria-snapshots were changed
       - name: 👩‍🔬 Test aria-snapshots with Playwright 🎭
         id: aria-snapshots
         shell: bash
         if: github.event.pull_request != null
         run: |
-          npm run test:aria-snapshots --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --update-snapshots
-          OUTPUT=$(npx --no tsx scripts/github/snapshot-changes/check-aria.ts)
+          pnpm --filter=${{ inputs.showcase }} run test:aria-snapshots --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --update-snapshots
+          OUTPUT=$(pnpm exec tsx scripts/github/snapshot-changes/check-aria.ts)
           echo "aria-snapshots-changed=$OUTPUT" >> $GITHUB_OUTPUT
-          OUTPUT=$(npx --no tsx scripts/github/snapshot-changes/check-main-aria.ts)
+          OUTPUT=$(pnpm exec tsx scripts/github/snapshot-changes/check-main-aria.ts)
           echo "aria-snapshots-changed-to-main=$OUTPUT" >> $GITHUB_OUTPUT
 
       - name: 👩‍🔬 Test axe-core with Playwright 🎭
         shell: bash
         if: github.event.pull_request != null
         run: |
-          npm run test:axe-core --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+          pnpm --filter=${{ inputs.showcase }} run test:axe-core --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
 
       - name: 👩‍🔬 Test visual-snapshots with Playwright 🎭
         id: visual-snapshots
         shell: bash
         if: github.event.pull_request != null
         run: |
-          npm run test:visual-snapshots --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --update-snapshots
-          OUTPUT=$(npx --no tsx scripts/github/snapshot-changes/check-visual.ts)
+          pnpm --filter=${{ inputs.showcase }} run test:visual-snapshots --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --update-snapshots
+          OUTPUT=$(pnpm exec tsx scripts/github/snapshot-changes/check-visual.ts)
           echo "visual-snapshots-changed=$OUTPUT" >> $GITHUB_OUTPUT
 
       - name: 👩‍🔬 Test a11y-checker with Playwright 🎭
@@ -116,13 +116,13 @@ jobs:
           github.event.pull_request != null &&
           steps.aria-snapshots.outputs.aria-snapshots-changed-to-main=='true'
         run: |
-          npm run test:a11y-checker --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+          pnpm --filter=${{ inputs.showcase }} run test:a11y-checker --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
 
       - name: 🔣 Print GitHub Report
         if: failure()
         shell: bash
         run: |
-          npx playwright merge-reports --reporter github ./blob-report
+          pnpm exec playwright merge-reports --reporter github ./blob-report
 
       - name: 🆙 Upload test results
         if: failure()

@@ -56,14 +56,14 @@ jobs:
 
       - name: 👩‍🔬 Test with Playwright 🎭
         working-directory: ./output/${{ steps.workingDirectory.outputs.dir }}
-        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        run: pnpm exec playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
 
       - name: 🔣 Print GitHub Report
         if: failure()
         working-directory: ./output/${{ steps.workingDirectory.outputs.dir }}
         shell: bash
         run: |
-          npx playwright merge-reports --reporter github ./blob-report
+          pnpm exec playwright merge-reports --reporter github ./blob-report
 
       - name: 🆙 Upload test results
         if: failure()

@@ -69,7 +69,7 @@ jobs:
           REPO_NAME: ${{ steps.repo-name.outputs.result }}
           OWNER_NAME: ${{ github.repository_owner }}
         run: |
-          npx --no tsx scripts/github/build-gh-page.ts
+          pnpm exec tsx scripts/github/build-gh-page.ts
 
       - name: 🥅 Deploy to GH-Pages
         uses: peaceiris/actions-gh-pages@v4

@@ -40,18 +40,18 @@ jobs:
       - name: ⏬ Install dependencies
         if: env.stylelint_update == 'true' || env.prettier_update == 'true'
         run: |
-          npm ci
+          pnpm install
 
       - name: 🏃 Run Stylelint to format the code
         if: env.stylelint_update == 'true'
         run: |
-          npm run build --workspace=@db-ux/core-stylelint
-          npm run lint:stylelint -- --fix
+          pnpm --filter=@db-ux/core-stylelint run build
+          pnpm run lint:stylelint --fix
 
       - name: 🏃 Run Prettier to format the code
         if: env.prettier_update == 'true'
         run: |
-          npm run codestyle
+          pnpm run codestyle
 
       - name: 🚘 Auto commit
         if: env.stylelint_update == 'true' || env.prettier_update == 'true'

@@ -22,8 +22,9 @@ jobs:
   codeql:
     uses: ./.github/workflows/99-codeql-analysis.yml
 
-  dependency-review:
-    uses: ./.github/workflows/99-dependency-review.yml
+  # TODO: use again after https://github.com/actions/dependency-review-action/pull/918 got merged
+  # dependency-review:
+  #   uses: ./.github/workflows/99-dependency-review.yml
 
   labeler:
     if: github.event.pull_request.head.repo.owner.login == 'db-ux-design-system'

@@ -1 +1 @@
-24
+24.3
@@ -1,6 +1,6 @@
 assets/fonts/**/sources/
 public/
-package-lock.json
+pnpm-lock.yaml
 build/
 node_modules
 output

@@ -9,7 +9,7 @@ We are committed to fostering a welcoming, respectful, and harassment-free envir
 Get credentials for public usage from [Marketingportal](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/resources/db-theme) and add them to your [`.env` File](./.env) - see [`.env.template`](./.env.template).
 
 ```shell
-npm install
+pnpm install
 # it should run postinstall tasks from @db-ux/db-theme* by default, if not:
 # execute this tasks manually to decode the assets using the previously made setup:
 node node_modules/@db-ux/db-theme-fonts/build/scripts/index.js
@@ -18,13 +18,13 @@ node node_modules/@db-ux/db-theme-illustrative-icons/build/scripts/index.js
 ```
 
 > [!NOTE]
-> If you missed setting up the `.env`-file before running `npm install`, you may need to re-install your packages to ensure the postinstall scrips are executed for decrypting the fonts and other artifacts (`rm --recursive --force node_modules/@db-ux/db-theme* && npm update @db-ux/db-theme`)
+> If you missed setting up the `.env`-file before running `pnpm install`, you may need to re-install your packages to ensure the postinstall scrips are executed for decrypting the fonts and other artifacts (`rm --recursive --force node_modules/@db-ux/db-theme* && pnpm update @db-ux/db-theme`)
 
 ## Start locally
 
 ```shell
-npm run build
-npm run dev
+pnpm run build
+pnpm run dev
 ```
 
 ## Make changes / Before you commit

@@ -34,7 +34,7 @@ designers, and content authors build, maintain, and scale best-of-class digital
 
 ## How to use
 
-Install your preferred package via npm or yarn e.g. `npm i @db-ux/react-core-components`.
+Install your preferred package via npm, pnpm or yarn e.g. `npm i @db-ux/react-core-components`.
 
 Afterwards, you need to include the specific CSS or SCSS files to apply the styles of DB UX Design System (Version 3), as described in the "Styling Dependencies" section of each package's `README`.
 We even provide some [examples of integrations](https://github.com/db-ux-design-system/examples).