Browse all available components in the library. Click on any component to view its documentation, implementation details, and examples.
Use the inset text component to emphasise a piece of important information on the page.
Based on the GOV.UK Design System inset text component.
Use the warning text component to warn users about something important, such as legal consequences.
Based on the GOV.UK Design System warning text component.
Map for visualising geographic data.
Explain here what the component does.
A navigation component that helps users understand where they are in a website's hierarchy.
Based on the GOV.UK Design System breadcrumbs component pattern.
A footer component that provides navigation, meta information, and licensing details.
Based on the GOV.UK Design System footer component pattern.
A header component that provides GOV.UK branding and identity.
Based on the GOV.UK Design System header component pattern.
Provides a branded header for internal-facing government services.
Includes a logo, organisation name, service name, and optional account navigation (account name, sign out link).
This component is based on the MOJ Design System Header.
Use this component at the top of every page in an internal government service.
It establishes the visual identity and provides essential navigation links.
Displays a phase banner according to GDS design system guidance, typically used to indicate the status of a service (e.g., Alpha, Beta).
A service navigation component that provides service name and navigation options.
Based on the GOV.UK Design System service navigation component pattern.
A side navigation component that provides an accessible way to navigate between different sections of a website.
Based on the DWP Design System side navigation component pattern.
The HeaderNav component displays the main service navigation header.
It includes the service name, a set of primary navigation links, and a toggle button for mobile navigation.
This component is essentially the same as the Service Navigation component, but allows you too plugin your own mobile nav link flyout panel and monitor the current section. Both of these features are useful when used in conjunction with the MobileNav and SideNav components to synchronise the expanded state and use more advanced navigation patterns / layouts.
The MobileNav component provides a mobile-specific navigation panel.
It typically appears as a fly-out or full-screen menu, triggered by a toggle button in a primary header (like HeaderNav).
It displays a structured list of navigation sections and items, allowing users to navigate the application on smaller screens.
This component is often managed by the ServiceNavigationNestedMobile component, which coordinates its state and interactions with HeaderNav.
Combines the HeaderNav and MobileNav components to create a responsive service navigation.
Manages the open/closed state of the mobile menu and synchronizes the current section based on the active route.
The SideNav component displays a vertical navigation menu, typically used in a sidebar.
It's designed to show links relevant to the current main section of an application.
It can display a flat list of items or items grouped under titles.
Active items can be highlighted, and an active item can also display a nested list of sub-items, often used for in-page navigation (linking to sections with hash URLs like #introduction, #details, etc.).
An expandable and collapsible section component that allows users to show and hide content.
Based on the GOV.UK Design System accordion component pattern.
Enables the user to carry out some action by clicking on it, e.g. Sign in or Save and continue
Based on the GOV.UK Design System button component pattern.
Provides a list of links, commonly used to list the contents of a page with links pointing to headings within the document, but can also be used for a list of links to other pages.
Supports simple nesting (one level deep) and optional number formatting.
Based on the GOV.UK Publishing Components contents list.
Allow users to accept or reject cookies which are not essential to making your service work.
Based on the GOV.UK Design System cookie banner component pattern.
Integrates with Google Tag Manager and provides cross-tab synchronisation of user preferences.
The date input component helps users enter a memorable date or one they can easily look up.
It uses text fields for entering day, month, and year numbers, with appropriate validation and error handling.
Based on the GOV.UK Design System date input component pattern.
Allows the user to see more information.
Based on the GOV.UK Design System checkbox component pattern.
A collapsible filter panel component that allows users to refine search results or content listings. Based on the GOV.UK Finder Frontend component, it supports various filter types including radio buttons, date inputs, dropdowns, and checkboxes.
The component includes built-in GA4 event tracking, responsive design, and accessibility features like ARIA labels and keyboard navigation.
An example of the original component in use can be seen on the GOV.UK search page.
The masthead component is used to display the main heading and introduction for a service or page. It typically appears at the top of the homepage and includes a title, description, call-to-action button, and optional illustration.
Use the notification banner component to tell the user about something they need to know about, but that's not directly related to the page content.
Based on the GOV.UK Design System notification banner component.
A radios component that allows users to select exactly one option from a list.
Based on the GOV.UK Design System radios component pattern.
Displays lists of related content links, such as related pages, topics, collections, or external resources.
Based on the GOV.UK Publishing Components related navigation.
A search box that provides autocomplete suggestions as the user types.
Based on the GOV.UK Publishing Components search with autocomplete box.
Uses the accessible-autocomplete library.
A search box with label and attached submit button.
Based on the GOV.UK Publishing Components search box.
Renders a standard HTML select dropdown component styled according to the GOV.UK Design System.
Based on the GOV.UK Design System Select component.
The Tabs component lets users navigate between related sections of content, displaying one section at a time.
Based on the GOV.UK Design System tabs component.
The WhatsNew component displays news, updates, and release information in a structured format. It's designed to communicate recent changes, new features, or important announcements to users.
The component supports flexible content including dates, descriptions, release notes links, and related component links displayed as bulleted lists.