We're excited to announce the first release of our GOVUK React Components Library! This library provides a collection of React components built based on the Government Digital Service (GDS) specifications, aimed at creating consistent and accessible user experiences for UK government digital services.
-
GDS Compliant Components: Our library includes a set of React components that adhere to the GDS Design System specifications, ensuring consistency with UK government digital services.
-
Accessibility Focus: All components are designed with accessibility in mind, following WCAG guidelines to ensure inclusive user experiences.
-
Easy Integration: Built on top of the govuk-frontend library, our components can be easily integrated into existing React applications.
-
TypeScript Support: The library is written in TypeScript, providing strong typing and better developer experience.
-
Storybook Integration: Each component comes with Storybook stories, allowing developers to interact with and understand the components in isolation.
-
Comprehensive Testing: All components are thoroughly tested using Jest, ensuring reliability and stability.
-
Customizable Styles: While adhering to GDS design principles, components can be customized to fit specific project needs.
- Accordion
- Boolean
- Breadcrumbs
- Button
- CharacterCount
- CheckBoxes
- CookieBanner
- DateInput
- Details
- ErrorMessage
- ErrorSummary
- Fieldset
- FileUpload
- Footer
- Header
- Hint
- Input
- InsetText
- Label
- NotificationBanner
- Pagination
- Panel
- PhaseBanner
- Radios
- Select
- ServiceNavigation
- SkipLink
- SummaryList
- Table
- Tabs
- Tag
- TaskList
- Textarea
- WarningText
There are Also Several components that can be used for error processing and other functionality like dashboard display:
- CardColumn
- CardLayout
- DataNavigation
- DifferenceNavigation
- ErrorBoundary
- Landing
- NotFoundPage
- PDFViewer
- PDFViewerCanvas
- ProblemWithService
- WarningInfo
There are also some useful components :
- ActionLink
- BackLink
- LinkWithRef
- Loading
- Main
To start using the GDS React Components Library in your project:
-
Install the package:
npm install @hmlr/govuk-react-components-library -
Import and use the components in your React application:
import { Panel } from "@hmlr/govuk-react-component-library"; export default function SuccessPanel() { return ( <Panel titleChildren="Application complete"> Your reference number: HDJ2123F </Panel> ); }
-
Refer to our comprehensive documentation for detailed usage instructions and examples for each component.
This library May be expanded with additional components and features in future releases. Feedback and contributions from the community are welcome to help improve and grow this project.
Thank you for choosing our GOVUK React Components Library. We hope it helps you build great, accessible government digital services more efficiently!