{"id":23544063,"url":"https://github.com/rowellx68/nhs-components","last_synced_at":"2026-04-05T16:01:46.937Z","repository":{"id":181502813,"uuid":"666870176","full_name":"rowellx68/nhs-components","owner":"rowellx68","description":"A React implementation of the NHS.UK Frontend library. Compatible with Next.js","archived":false,"fork":false,"pushed_at":"2026-04-04T21:03:03.000Z","size":32430,"stargazers_count":8,"open_issues_count":8,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-04T22:44:28.448Z","etag":null,"topics":["component-library","frontend","nextjs","nhs","react","reactjs","reactservercomponents"],"latest_commit_sha":null,"homepage":"https://rowellx68.github.io/nhs-components/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rowellx68.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-07-15T21:28:26.000Z","updated_at":"2026-04-04T21:02:39.000Z","dependencies_parsed_at":"2024-09-16T14:59:22.029Z","dependency_job_id":"50c194d1-e36b-411a-b0f8-a990a81c2dc0","html_url":"https://github.com/rowellx68/nhs-components","commit_stats":{"total_commits":350,"total_committers":3,"mean_commits":"116.66666666666667","dds":"0.15714285714285714","last_synced_commit":"8565476dea076a1f226af652a7b2a074b453c315"},"previous_names":["rowellx68/nhs-components"],"tags_count":102,"template":false,"template_full_name":null,"purl":"pkg:github/rowellx68/nhs-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rowellx68%2Fnhs-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rowellx68%2Fnhs-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rowellx68%2Fnhs-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rowellx68%2Fnhs-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rowellx68","download_url":"https://codeload.github.com/rowellx68/nhs-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rowellx68%2Fnhs-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31441057,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T15:22:31.103Z","status":"ssl_error","status_checked_at":"2026-04-05T15:22:00.205Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","frontend","nextjs","nhs","react","reactjs","reactservercomponents"],"created_at":"2024-12-26T07:13:17.744Z","updated_at":"2026-04-05T16:01:46.932Z","avatar_url":"https://github.com/rowellx68.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `nhsuk-frontend-react`\n\n![MIT](https://img.shields.io/badge/License-MIT-green?style=flat-square)\n![CI](https://img.shields.io/github/actions/workflow/status/rowellx68/nhs-components/publish.yml?style=flat-square\u0026label=Build%20and%20Publish)\n\u003ca href=\"https://www.npmjs.com/package/nhsuk-frontend-react\"\u003e\n![NPM](https://img.shields.io/npm/v/nhsuk-frontend-react?style=flat-square\u0026label=Version)\n\u003c/a\u003e\n\nThis is an unofficial React implementation of the [NHS.UK Frontend](https://github.com/nhsuk/nhsuk-frontend) library. It is heavily inspired by [nhsuk-react-components](https://github.com/NHSDigital/nhsuk-react-components), originally written by [Thomas Judd-Cooper](https://github.com/Tomdangov) and [other contributors](https://github.com/NHSDigital/nhsuk-react-components/graphs/contributors).\n\nThis 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.\n\n## Version compatibility\n\nWith the release of v10.4 of the NHS.UK Frontend library, the version of this library has been bumped to v5. The following table shows the compatibility between the NHS.UK Frontend library and `nhsuk-frontend-react`:\n\n| nhsuk-frontend | nhsuk-frontend-react | branch                                                        |\n| -------------- | -------------------- | ------------------------------------------------------------- |\n| `8.x.x`        | `3.x.x`              | [v3](https://github.com/rowellx68/nhs-components/tree/v3)     |\n| `9.x.x`        | `4.x.x`              | [v4](https://github.com/rowellx68/nhs-components/tree/v4)     |\n| `10.4.x`       | `5.x.x`              | [main](https://github.com/rowellx68/nhs-components/tree/main) |\n\n## Features\n\n- Written in TypeScript\n- Polymorphic components for easy customisation\n- Compatible with Next.js and React Server Components\n- Supports the latest version of the NHS.UK Frontend library\n- Supports all components from the NHS.UK Frontend library\n\n## Polymorphic Components\n\nA 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.\n\nThis feature is was taken from [Mantine](https://github.com/mantinedev/mantine), have a look at their [polymorphic components documentation](https://mantine.dev/guides/polymorphic/) for more information.\n\nHere is an example of how you can use a custom `Link` component with the `Header.ServiceLogo` component:\n\n```tsx\nimport { Header, HeaderContainer, HeaderServiceLogo } from 'nhsuk-frontend-react';\nimport Link from 'next/link';\n\nexport const AppHeader = () =\u003e (\n  \u003cHeader\u003e\n    \u003cHeaderContainer\u003e\n      {/* Now HeaderServiceLogo will have the same prop type as Link. That means that href is now required. */}\n      \u003cHeaderServiceLogo as={Link} href=\"/\" variant=\"logo-only\" aria-label=\"NHS homepage\" /\u003e\n    \u003c/HeaderContainer\u003e\n  \u003c/Header\u003e\n);\n```\n\n## Full List of Polymorphic Components\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n- `ActionLink`\n- `AToZ.Item`\n- `BackLink`\n- `BackToTopLink`\n- `Breadcrumb.BackLink`\n- `Breadcrumb.ListItem`\n- `Button`\n- `Card.Image`\n- `Card.Link`\n- `ContentList.ListItem`\n- `DoDontList.Label`\n- `ErrorSummary.ListItem`\n- `ErrorSummary.Title`\n- `Fieldset.Legend`\n- `Figure.Image`\n- `Footer.ListItem`\n- `Header.NavItem`\n- `Header.ServiceLogo`\n- `Heading`\n- `Link`\n- `List`\n- `Pagination.Item`\n- `SummaryList.Row.ActionLink`\n- `Tabs.Title`\n- `Tabs.ListItem`\n- `TaskList.Item.NameAndHint`\n- `VisuallyHidden`\n- `WarningCallout.Label`\n\n\u003c/details\u003e\n\n## Installation\n\n```bash\npnpm add nhsuk-frontend nhsuk-frontend-react\n```\n\n## Example\n\nBoth usages below will render the following:\n\n![Example](./assets/ask-users-for-their-nhs-number--ask-users-for-their-nhs-number.png)\n\n### Usage with React\n\n\u003cdetails\u003e\n\u003csummary\u003eCode\u003c/summary\u003e\n\n```tsx\nimport { Input, Header, Container, Main, Column, Row, Button } from 'nhsuk-frontend-react';\n\nconst Component = () =\u003e (\n  \u003c\u003e\n    \u003cHeader\u003e\n      \u003cHeader.Container\u003e\n        \u003cHeader.ServiceLogo href=\"/\" variant=\"logo-only\" aria-label=\"NHS homepage\" /\u003e\n      \u003c/Header.Container\u003e\n      \u003cHeader.Nav /\u003e\n    \u003c/Header\u003e\n    \u003cContainer\u003e\n      \u003cMain\u003e\n        \u003cRow\u003e\n          \u003cColumn width=\"two-thirds\"\u003e\n            \u003cform\u003e\n              \u003cInput\n                label=\"What is your NHS number?\"\n                labelProps={{ variant: 'page-heading', size: 'l' }}\n                width=\"10\"\n                hint={\n                  \u003c\u003e\n                    Your NHS number is a 10 digit number that you find on any letter the NHS has\n                    sent you. For example, \u003cspan className=\"nhsuk-u-nowrap\"\u003e485 777 3456\u003c/span\u003e.\n                  \u003c/\u003e\n                }\n              /\u003e\n              \u003cButton\u003eContinue\u003c/Button\u003e\n            \u003c/form\u003e\n          \u003c/Column\u003e\n        \u003c/Row\u003e\n      \u003c/Main\u003e\n    \u003c/Container\u003e\n  \u003c/\u003e\n);\n```\n\n\u003c/details\u003e\n\n### Usage with Next.js\n\n\u003cdetails\u003e\n\u003csummary\u003eCode\u003c/summary\u003e\n\n```tsx\nimport {\n  Input,\n  Header,\n  HeaderContainer, // notice how we have to import HeaderContainer separately\n  HeaderServiceLogo, // Next.js does not work with nested components yet\n  Container,\n  Main,\n  Column,\n  Row,\n  Button,\n} from 'nhsuk-frontend-react';\n\nconst Component = () =\u003e (\n  \u003c\u003e\n    \u003cHeader\u003e\n      \u003cHeaderContainer\u003e\n        \u003cHeaderServiceLogo href=\"/\" variant=\"logo-only\" aria-label=\"NHS homepage\" /\u003e\n      \u003c/HeaderContainer\u003e\n    \u003c/Header\u003e\n    \u003cContainer\u003e\n      \u003cMain\u003e\n        \u003cRow\u003e\n          \u003cColumn width=\"two-thirds\"\u003e\n            \u003cform\u003e\n              \u003cInput\n                label=\"What is your NHS number?\"\n                labelProps={{ variant: 'page-heading', size: 'l' }}\n                width=\"10\"\n                hint={\n                  \u003c\u003e\n                    Your NHS number is a 10 digit number that you find on any letter the NHS has\n                    sent you. For example, \u003cspan className=\"nhsuk-u-nowrap\"\u003e485 777 3456\u003c/span\u003e.\n                  \u003c/\u003e\n                }\n              /\u003e\n              \u003cButton\u003eContinue\u003c/Button\u003e\n            \u003c/form\u003e\n          \u003c/Column\u003e\n        \u003c/Row\u003e\n      \u003c/Main\u003e\n    \u003c/Container\u003e\n  \u003c/\u003e\n);\n```\n\n\u003c/details\u003e\n\n## Storybook\n\nAll of the components in this library are documented in Storybook.\n\nhttps://rowellx68.github.io/nhs-components/\n\n## Testing\n\nTo run the tests, you can use the following command:\n\n```bash\npnpm test\n```\n\n## License\n\nThe codebase is released under the MIT Licence, unless stated otherwise.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frowellx68%2Fnhs-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frowellx68%2Fnhs-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frowellx68%2Fnhs-components/lists"}