# nhsdigital/nhsuk-react-components architecture

> Architecture diagram of the GitHub repository nhsdigital/nhsuk-react-components, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nhsdigital/nhsuk-react-components
- Repository: https://github.com/nhsdigital/nhsuk-react-components

## Overview

NHS.UK React Components is a reusable React UI library porting NHS.UK frontend components. The principal workflow is that a consuming application imports components from the package entry point, composes them into a page or form, and renders NHS-styled UI. Its distinct capability areas include content presentation, form controls, navigation, layout, and page patterns. The sampled entry point confirms exports of components, patterns, and shared types; individual component wiring was not sampled, so the graph does not infer internal call relationships.

Main entry points: [`src/index.ts`](https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/index.ts) (Package exports), [`src/patterns/index.ts`](https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/patterns/index.ts) (Page patterns), [`src/components/index.ts`](https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/components/index.ts) (Component exports)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Content presentation"]
  node_content_components["Content components"]
end

subgraph group_forms["Form elements"]
  node_form_components["Form controls"]
end

subgraph group_navigation["Navigation"]
  node_navigation_components["Navigation components"]
end

subgraph group_layout["Layout and typography"]
  node_layout_components["Layout and typography"]
  node_typography["Typography"]
end

subgraph group_patterns["Page patterns"]
  node_patterns["Page patterns<br/>[index.ts]"]
  node_nav_az["A–Z navigation<br/>[NavAZ.tsx]"]
  node_review_date["Review date<br/>[ReviewDate.tsx]"]
end

node_consumer(("Consuming application"))
node_entry["Package exports<br/>[index.ts]"]
node_components["Component exports<br/>[index.ts]"]

node_consumer -->|"imports"| node_entry
node_entry -->|"exports"| node_components
node_entry -->|"exports"| node_patterns

click node_entry "https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/index.ts"
click node_components "https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/components/index.ts"
click node_content_components "https://github.com/nhsdigital/nhsuk-react-components/tree/main/src/components/content-presentation"
click node_form_components "https://github.com/nhsdigital/nhsuk-react-components/tree/main/src/components/form-elements"
click node_navigation_components "https://github.com/nhsdigital/nhsuk-react-components/tree/main/src/components/navigation"
click node_layout_components "https://github.com/nhsdigital/nhsuk-react-components/tree/main/src/components/layout"
click node_typography "https://github.com/nhsdigital/nhsuk-react-components/tree/main/src/components/typography"
click node_patterns "https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/patterns/index.ts"
click node_nav_az "https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/patterns/nav-a-z/NavAZ.tsx"
click node_review_date "https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/patterns/review-date/ReviewDate.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_content_components toneBlue
class node_form_components toneAmber
class node_navigation_components toneMint
class node_layout_components,node_typography toneRose
class node_patterns,node_nav_az,node_review_date,node_consumer toneIndigo
class node_entry,node_components toneTeal
```

## Components

### Content presentation

- [Content components](https://github.com/nhsdigital/nhsuk-react-components/tree/main/src/components/content-presentation): `src/components/content-presentation`

### Form elements

- [Form controls](https://github.com/nhsdigital/nhsuk-react-components/tree/main/src/components/form-elements): `src/components/form-elements`

### Navigation

- [Navigation components](https://github.com/nhsdigital/nhsuk-react-components/tree/main/src/components/navigation): `src/components/navigation`

### Layout and typography

- [Layout and typography](https://github.com/nhsdigital/nhsuk-react-components/tree/main/src/components/layout): `src/components/layout`
- [Typography](https://github.com/nhsdigital/nhsuk-react-components/tree/main/src/components/typography): `src/components/typography`

### Page patterns

- [Page patterns](https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/patterns/index.ts): `src/patterns/index.ts`
- [A–Z navigation](https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/patterns/nav-a-z/NavAZ.tsx): `src/patterns/nav-a-z/NavAZ.tsx`
- [Review date](https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/patterns/review-date/ReviewDate.tsx): `src/patterns/review-date/ReviewDate.tsx`

### Other components

- **Consuming application**
- [Package exports](https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/index.ts): `src/index.ts`
- [Component exports](https://github.com/nhsdigital/nhsuk-react-components/blob/main/src/components/index.ts): `src/components/index.ts`

## Connections

- Consuming application → Package exports: imports
- Package exports → Component exports: exports
- Package exports → Page patterns: exports