# author-design-system-react > React Design System library for use with the [Author v2](https://github.com/ONSdigital/eq-author-frontend) project. Latest version **1.0.83** (published 2026-09-02) · ISC license · 0 weekly downloads ## Install ```sh npm install author-design-system-react pnpm add author-design-system-react yarn add author-design-system-react bun add author-design-system-react ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 1.0.83 | | Published | 2026-09-02 | | First published | 2023-06-23 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=20.11.1 | | Dependencies | 14 | | Unpacked size | 2.4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | eq-author | ## Links - npm: https://www.npmjs.com/package/author-design-system-react - Repository: https://github.com/ONSdigital/author-design-system-react - Homepage: https://github.com/ONSdigital/author-design-system-react#readme - Issues: https://github.com/ONSdigital/author-design-system-react/issues - npm.io page: https://npm.io/package/author-design-system-react ## Dependencies (14) - [react](https://npm.io/package/react.md) ^18.0.0 - [formik](https://npm.io/package/formik.md) 2.4.5 - [lexical](https://npm.io/package/lexical.md) 0.42.0 - [react-dom](https://npm.io/package/react-dom.md) ^18.0.0 - [@lexical/html](https://npm.io/package/@lexical/html.md) 0.42.0 - [@lexical/link](https://npm.io/package/@lexical/link.md) 0.42.0 - [@lexical/list](https://npm.io/package/@lexical/list.md) 0.42.0 - [@lexical/react](https://npm.io/package/@lexical/react.md) 0.42.0 - [@storybook/test](https://npm.io/package/@storybook/test.md) 8.6.0 - [focus-trap-react](https://npm.io/package/focus-trap-react.md) 10.2.3 - [react-router-dom](https://npm.io/package/react-router-dom.md) 6.22.3 - [@lexical/rich-text](https://npm.io/package/@lexical/rich-text.md) 0.42.0 - [@lexical/selection](https://npm.io/package/@lexical/selection.md) 0.42.0 - [jest-html-reporter](https://npm.io/package/jest-html-reporter.md) 3.10.2 ## Recent versions - 1.0.83 (latest) — 2026-09-02 - 0.0.0 (v1.4) — 2023-06-23 - 1.0.82 — 2026-08-14 - 1.0.81 — 2026-08-10 - 1.0.80 — 2026-07-23 - 1.0.79 — 2026-07-20 - 1.0.78 — 2026-07-20 - 1.0.77 — 2026-07-14 - 1.0.76 — 2026-06-25 - 1.0.75 — 2026-06-17 - 1.0.74 — 2026-06-16 - 1.0.73 — 2026-06-11 - 1.0.72 — 2026-06-03 - 1.0.71 — 2026-05-14 - 1.0.70 — 2025-02-12 - … 58 more at https://npm.io/package/author-design-system-react/versions ## README # Author React Design System React Design System library for use with the [Author v2](https://github.com/ONSdigital/eq-author-frontend) project. The Blaise Design System React Component Library has been phased out of the Author Design System React Component Library and will no longer be available. ## Setup To use this library as a dependency within a project, run: ``` yarn add https://github.com/ONSdigital/eq-author-design-system-react#main ``` Specifying `#main` installs the most recently released version of the Author React Design System's `main` branch. To install a specific release version of the Author React Design System in a project, replace `#main` with `#` in the above command. --- Before using components from this library, add the following code within the `` tags of your React project's `public/index.html` file: ``` ``` The above code implements the ONS Design System's global CSS style rules into your project - if this code is not included, style rules will not be applied to this library's components within your project. ## Testing changes Several new scripts are available to use when running tests: `yarn test: jest --watchAll` > This is a standard command to run your test suites. `yarn test:watch` > "jest --watch" Watch mode continuously monitors for changes in your project files and re-runs the tests whenever a change is detected. `yarn test:coverage` > "jest --collectCoverage --coverageDirectory=\"./coverage\"" - When you run this script (yarn test:coverage), it executes Jest and collects code coverage information.test:coverage), it executes Jest and collects code coverage information. `yarn test:verbose` > "jest --verbose" - The --verbose flag makes Jest output more detailed information during the test run, providing additional insights into the test execution process. ## Usage of new scripts: - All tests: `yarn test` - Specific test: ` yarn test `, eg `yarn test src/Utils/StringUtils.test.tsx` ## Add a component To add a component to the Author Design System React library from the Blaise Design System React Components library: - Open `src/index.tsx` - Within the `index` file's `import` block, add the name of the component - Within the `index` file's `export` block, add the name of the component - Update this README file's [available components](#available-components) to list the component The component can only be added if it is available in the Blaise Design System React Components library. - [ ] Select Node version 20: Use `nvm use 20` to ensure Node version 20 is selected. - [ ] Install node_modules: Run `yarn` to install the required dependencies. - [ ] Start Storybook: Run `yarn storybook` to start the Storybook development environment. To import a component from this library in a React project, use the following example: ``` import { Header, Button } from "author-design-system-react"; ``` Replace `Header, Button` with the required component(s) to import. --- To use a component once imported, use the following example: ``` <>