Use modern JSX runtime with Babel, named exports, verbatim syntax

.browserslistrc

@@ -0,0 +1,5 @@
+[javascripts]
+supports es6-module
+
+[node]
+node 22

.github/workflows/ci.yml

@@ -22,9 +22,9 @@ jobs:
       - name: Yarn Install
         run: yarn
       - name: Lint
-        run: yarn lint:ci
+        run: yarn lint
       - name: Jest Tests
-        run: yarn test:ci
+        run: yarn test --coverage
       - name: Typescript build
         run: yarn build
       - name: Storybook build

.github/workflows/release.yml

@@ -28,10 +28,10 @@ jobs:
         run: yarn
 
       - name: Lint
-        run: yarn lint:ci
+        run: yarn lint
 
       - name: Jest Tests
-        run: yarn test:ci
+        run: yarn test --coverage
 
       - name: Typescript build
         run: yarn build

.prettierignore

@@ -0,0 +1,12 @@
+# Node.js modules
+node_modules/
+
+# Test coverage
+coverage/
+
+# Build output
+dist/
+
+# Files to ignore
+.yarnrc.yml
+package-lock.json

.prettierrc

@@ -1,7 +1,8 @@
 {
+  "printWidth": 100,
+  "quoteProps": "consistent",
   "semi": true,
-  "trailingComma": "all",
   "singleQuote": true,
-  "printWidth": 100,
-  "tabWidth": 2
+  "tabWidth": 2,
+  "trailingComma": "all"
 }

.storybook/main.ts

@@ -4,21 +4,29 @@ import tsConfigPaths from 'vite-tsconfig-paths';
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: true,
-  },
+
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
+
   viteFinal(config) {
     return mergeConfig(config, {
       plugins: [tsConfigPaths()],
+      css: {
+        preprocessorOptions: {
+          scss: {
+            quietDeps: true,
+            loadPaths: ['node_modules'],
+          },
+        },
+      },
     });
   },
 };
+
 export default config;

.storybook/manager.ts

@@ -1,15 +1,18 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import nhsTheme from './theme';
 import { startCase, upperFirst } from 'lodash';
 
-const sentenceCase = (string) => {
-  if (typeof string !== 'string') return '';
-  return upperFirst(startCase(string).toLowerCase());
+const sentenceCase = (name = '') => {
+  if (!name || typeof name !== 'string') {
+    return '';
+  }
+
+  return upperFirst(startCase(name).toLowerCase());
 };
 
 addons.setConfig({
   sidebar: {
-    renderLabel: ({ name, type }) => sentenceCase(name),
+    renderLabel: ({ name }) => sentenceCase(name),
   },
   theme: nhsTheme,
 });

.storybook/preview.ts

@@ -1,5 +1,5 @@
 import './storybook.scss';
-import { Preview } from '@storybook/react';
+import { type Preview } from '@storybook/react-vite';
 
 const preview: Preview = {
   parameters: {
@@ -18,5 +18,8 @@ const preview: Preview = {
       },
     },
   },
+
+  tags: ['autodocs'],
 };
+
 export default preview;

.storybook/storybook.scss

@@ -1,5 +1,4 @@
-// Allow current nhsuk styles to override legacy
-@import 'nhsuk-frontend/dist/nhsuk';
+@forward 'nhsuk-frontend/dist/nhsuk';
 
 .tag-wrapper {
   display: flex;

.storybook/theme.ts

@@ -1,5 +1,5 @@
-import { create } from '@storybook/theming/create';
-const version = require('../package.json').version;
+import { create } from 'storybook/theming/create';
+import packageJson from '../package.json' with { type: 'json' };
 
 export default create({
   base: 'light',
@@ -31,6 +31,6 @@ export default create({
   inputTextColor: '#212b32',
   inputBorderRadius: 4,
 
-  brandTitle: `NHS.UK React Components (v${version})`,
+  brandTitle: `NHS.UK React Components (v${packageJson.version})`,
   brandUrl: 'https://github.com/NHSDigital/nhsuk-react-components',
 });

.vscode/settings.json

@@ -6,11 +6,9 @@
     "source.fixAll": "explicit",
     "source.fixAll.eslint": "explicit"
   },
-  "eslint.validate": ["javascript", "typescript"],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   "eslint.codeAction.showDocumentation": {
     "enable": true
   },
-  "eslint.alwaysShowStatus": true,
-  "eslint.workingDirectories": ["src"],
   "typescript.tsdk": "node_modules/typescript/lib"
 }

.yarnrc.yml

@@ -1,2 +1,17 @@
 nodeLinker: node-modules
-npmRegistryServer: https://registry.yarnpkg.com
+
+npmRegistryServer: "https://registry.yarnpkg.com"
+
+packageExtensions:
+  "@storybook/addon-docs@*":
+    peerDependencies:
+      "@types/react": "*"
+      "@types/react-dom": "*"
+
+  "@storybook/react-vite@*":
+    peerDependencies:
+      typescript: "*"
+
+  "storybook@*":
+    peerDependencies:
+      "@testing-library/dom": "*"

CHANGELOG.md

@@ -1,5 +1,11 @@
 # NHS.UK React components
 
+## 6.0.0-beta.1 - 8 October 2025
+
+This version adds the panel component from NHS.UK frontend v9.3.0 and supports React v19.
+
+For a full list of changes in this release please refer to the [migration doc](https://github.com/NHSDigital/nhsuk-react-components/blob/main/docs/upgrade-to-6.0.md).
+
 ## 6.0.0-beta.0 - 30 September 2025
 
 This version provides support for nhsuk-frontend version 10.

README.md

@@ -21,13 +21,13 @@ yarn add nhsuk-react-components
 ## Usage
 
 ```jsx
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 
 // You can import components from the global module
 import { Button } from 'nhsuk-react-components';
 
 // Or you can import components directly
-import Button from 'nhsuk-react-components/lib/components/button';
+import { Button } from 'nhsuk-react-components/dist/esm/components/button';
 
 class GetStartedButton extends PureComponent {
   render() {
@@ -43,6 +43,7 @@ class GetStartedButton extends PureComponent {
 - [Upgrading to 3.0](/docs/upgrade-to-3.0.md)
 - [Upgrading to 4.0](/docs/upgrade-to-4.0.md)
 - [Upgrading to 5.0](/docs/upgrade-to-5.0.md)
+- [Upgrading to 6.0](/docs/upgrade-to-6.0.md)
 
 ## Maintainers
 

babel.config.cjs

@@ -0,0 +1,69 @@
+const { NODE_ENV } = process.env;
+
+/**
+ * Babel config
+ *
+ * @type {TransformOptions}
+ */
+module.exports = {
+  browserslistEnv: 'javascripts',
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        // Apply bug fixes to avoid transforms
+        bugfixes: true,
+
+        // Apply smaller "loose" transforms for browsers
+        loose: true,
+
+        // Apply ES module transforms for Jest
+        // https://jestjs.io/docs/ecmascript-modules
+        modules: NODE_ENV === 'test' ? 'auto' : false,
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        development: NODE_ENV === 'development',
+        runtime: 'automatic',
+        useBuiltIns: true,
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  env: {
+    test: {
+      browserslistEnv: 'node',
+      plugins: [
+        // Override package.json "imports" for Jest to use sources
+        // otherwise a build step to output `./dist` is necessary
+        [
+          'module-resolver',
+          {
+            alias: {
+              '#components': './src/components',
+              '#patterns': './src/patterns',
+              '#util': './src/util',
+              'nhsuk-react-components': './src/index.ts',
+            },
+          },
+        ],
+        // Remove mandatory ES module file extensions for Jest
+        // https://nodejs.org/api/esm.html#mandatory-file-extensions
+        [
+          'replace-import-extension',
+          {
+            extMapping: {
+              '.js': '',
+            },
+          },
+        ],
+      ],
+    },
+  },
+};
+
+/**
+ * @import { TransformOptions } from '@babel/core'
+ */