React Govuk Design System

React components and templates for the GOV.UK Design System — TypeScript, accessible, and ready for UK government services.

🙌 We're looking for volunteer contributors — help us grow this library. All levels welcome.

Table of Contents

• Introduction
• Demo
• Benefits
• Getting Started
• Installation
• Usage
• Contributing
• Volunteer with us
• Releasing and deployment
• License
• Related Links

Introduction

@rottitime/govuk-design-react gives you pre-built, accessible React components based on the official GOV.UK Design System. Use it to build services that meet UK government design and accessibility standards without building everything from scratch.

Demo

Open Storybook → — live examples and docs for every component.

Benefits

By using GovUK Design React, you'll enjoy:

• 💡 Proven Design: Powered by GovUK Design System, which goes through user testing, has the best accessibility, and is fully responsive.
• ⏱️ Time Savings: No need to create components from scratch—get up and running quickly with pre-built components.
• ♿ Accessibility: Components are designed to meet the highest accessibility standards, ensuring your application is usable by everyone.
• 🎨 Consistency: Maintain design consistency with the UK Government Design System across all your projects.
• 🛠️ Customization: Easily customize components to fit your specific needs without compromising on design standards.
• ✅ Testing and Linting: Built-in unit tests and linting ensure code quality and reliability.
• 📚 Live Documentation: Interactive storybook documentation lets you see components in action and experiment with different configurations.

Getting Started

Ready to dive in? Here's a quick guide to get you up and running with GovUK Design React.

Requirements

• govuk-frontend — This library uses the official GOV.UK Frontend styles and is tested with govuk-frontend v6.x (peer dependency ^6.1.0). Install it in your project so components render with the correct GOV.UK look and feel.

Installation

Install the library and its peer dependency via npm or yarn:

npm install @rottitime/govuk-design-react govuk-frontend

Usage

Using GovUK Design React is as simple as importing the components you need and integrating them into your React application:

import React from 'react'
import { Button } from '@rottitime/govuk-design-react'

const App = () => (
  <div>
    <h1>Hello, GovUK Design React!</h1>
    <Button>Click me</Button>
  </div>
)

export default App

See the Storybook documentation for live examples and guides for each component.

Contributing

We welcome contributions from the community! If you'd like to contribute, please check out our contributing guidelines for more information on how to get started.

• @rameshreddy-adutla — first contributor in the door, who set the bar with solid unit tests and Storybook docs. See the energy.

Volunteer with us

We're actively looking for volunteer contributors to help build components, improve docs, fix bugs, and boost accessibility. Whether you're experienced or learning — see how you can help →

Releasing and deployment

For versioning, publishing to npm, and Storybook deployment, see DEPLOYMENT.md.

License

MIT — see LICENSE.

Related Links

• GOV.UK Design System — official UK Government Design System
• Storybook — component demos and docs
• npm package
• Contributing
• Volunteers — join as a volunteer contributor
• Deployment — versioning, npm publish, Storybook
• Terms for non-GOV.UK sites

Questions or bugs? Open an issue.