nhsuk-frontend-react

This is an unofficial React implementation of the NHS.UK Frontend library. It is heavily inspired by nhsuk-react-components, originally written by Thomas Judd-Cooper and other contributors.

This implementation supports the latest version of the NHS.UK Frontend library and is written in TypeScript. It is designed to be used with modern React applications and is compatible with Next.js and React Server Components.

Version compatibility

With the release of v9 of the NHS.UK Frontend library, the version of this library has been bumped to v4. The following table shows the compatibility between the NHS.UK Frontend library and nhsuk-frontend-react:

nhsuk-frontend	nhsuk-frontend-react	branch
8.x.x	3.x.x	v3
9.x.x	4.x.x	main

Features

• Written in TypeScript
• Polymorphic components for easy customisation
• Compatible with Next.js and React Server Components
• Supports the latest version of the NHS.UK Frontend library
• Supports all components from the NHS.UK Frontend library

Polymorphic Components

A few components in this library are polymorphic, meaning they can accept a different component as a prop and render as that component. This is particularly useful when you want to use a custom component, say a Link component from a routing library, instead of the default a tag.

This feature is was taken from Mantine, have a look at their polymorphic components documentation for more information.

Here is an example of how you can use a custom Link component with the Header.Logo component:

import { Header, HeaderContainer, HeaderLogo } from 'nhsuk-frontend-react';
import Link from 'next/link';

export const AppHeader = () => (
  <Header>
    <HeaderContainer>
      {/* Now HeaderLogo will have the same prop type as Link. That means that href is now required. */}
      <HeaderLogo
        as={Link}
        href="/"
        variant="logo-only"
        aria-label="NHS homepage"
      />
    </HeaderContainer>
  </Header>
);

Full List of Polymorphic Components

Click to expand

• ActionLink
• BackLink
• Breadcrumb.BackLink
• Breadcrumb.ListItem
• Button
• Card.Image
• Card.Link
• ContentList.ListItem
• DoDontList.Label
• ErrorSummary.ListItem
• Fieldset.Legend
• Figure.Image
• Footer.ListItem
• Header.Logo
• Header.NavItem
• Header.TransactionLink
• Heading
• Link
• Pagination.Item
• SummaryList.Row.ActionLink
• Tabs.Title
• TaskList.Item.NameAndHint
• VisuallyHidden
• WarningCallout.Label

Installation

pnpm add nhsuk-frontend nhsuk-frontend-react

Example

Both usages below will render the following:

Usage with React

Code

import {
  Input,
  Header,
  Container,
  Main,
  Column,
  Row,
  Button,
} from 'nhsuk-frontend-react';

const Component = () => (
  <>
    <Header>
      <Header.Container>
        <Header.Logo href="/" variant="logo-only" aria-label="NHS homepage" />
      </Header.Container>
      <Header.Nav />
    </Header>
    <Container>
      <Main>
        <Row>
          <Column width="two-thirds">
            <form>
              <Input
                label="What is your NHS number?"
                labelProps={{ variant: 'page-heading', size: 'l' }}
                width="10"
                hint={
                  <>
                    Your NHS number is a 10 digit number that you find on any
                    letter the NHS has sent you. For example,{' '}
                    <span className="nhsuk-u-nowrap">485 777 3456</span>.
                  </>
                }
              />
              <Button>Continue</Button>
            </form>
          </Column>
        </Row>
      </Main>
    </Container>
  </>
);

Usage with Next.js

Code

import {
  Input,
  Header,
  HeaderContainer, // notice how we have to import HeaderContainer separately
  HeaderLogo, // Next.js does not work with nested components yet
  Container,
  Main,
  Column,
  Row,
  Button,
} from 'nhsuk-frontend-react';

const Component = () => (
  <>
    <Header>
      <HeaderContainer>
        <HeaderLogo href="/" variant="logo-only" aria-label="NHS homepage" />
      </HeaderContainer>
    </Header>
    <Container>
      <Main>
        <Row>
          <Column width="two-thirds">
            <form>
              <Input
                label="What is your NHS number?"
                labelProps={{ variant: 'page-heading', size: 'l' }}
                width="10"
                hint={
                  <>
                    Your NHS number is a 10 digit number that you find on any
                    letter the NHS has sent you. For example,{' '}
                    <span className="nhsuk-u-nowrap">485 777 3456</span>.
                  </>
                }
              />
              <Button>Continue</Button>
            </form>
          </Column>
        </Row>
      </Main>
    </Container>
  </>
);

Storybook

All of the components in this library are documented in Storybook.

https://rowellx68.github.io/nhs-components/

Testing

To run the tests, you can use the following command:

pnpm test

License

The codebase is released under the MIT Licence, unless stated otherwise.