React Design System

A collection of reusable React components following GOV.UK design patterns.

Table of Contents

• Installation
• Usage
• Development
  • Build
  • Playground

Installation

npm install @uktrade/react-component-library

Peer Dependencies:

• react >= 19
• react-dom >= 19

Usage

Import components from the package:

import { SummaryList, SummaryItem } from "@uktrade/react-component-library";

You can use them directly in your React applications.

Development

Build

git clone https://github.com/uktrade/react-component-library.git
cd react-component-library
nvm use
npm ci
npm run build

Copies TypeScript output and .css files into dist/.

Playground

npm run build
npm run docs:build
npm run docs:start

This opens a Vite dev server with the playground for testing components.

Publishing a new version

To publish a new version to NPM @uktrade/react-component-library:

1. Update the version in package.json following semantic versioning (don’t forget to sync the lockfile as well).
2. Commit your changes on a feature or working branch.
3. Open a pull request and merge it into main.
4. Create a new GitHub Release from the main branch and tag it with the same version (for example, v0.10.1).
5. Once the release is published, the GitHub Actions workflow will automatically build and publish the package to NPM.