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.
- 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
A few components in this library are polymorphic, meaning they can accept a different component as a prop. 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.
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>
);Click to expand
ActionLinkBackLinkBreadcrumb.BackLinkBreadcrumb.ListItemButtonCard.ImageCard.LinkContentList.ListItemDoDontList.LabelErrorSummary.ListItemFieldset.LegendFigure.ImageFooter.ListItemHeader.LogoHeader.NavItemHeader.TransactionLinkHeadingLinkPagination.ItemSummaryList.Row.ActionLinkTabs.TitleVisuallyHiddenWarningCallout.Label
pnpm add nhsuk-frontend nhsuk-frontend-reactBoth usages below will render the following:
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>
</>
);Code
import {
Input,
Header,
HeaderContainer, // notice how we have to import HeaderContainer separately
HeaderLogo, // RSC 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>
</>
);To run the tests, you can use the following command:
pnpm testThe codebase is released under the MIT Licence, unless stated otherwise.