@rottitime/govuk-design-react

React Govuk Design System

Table of Contents

• Introduction
• Demo
• Benefits
• Getting Started
• Installation
• Usage
• Contributing
• License
• Related Links

Introduction

Welcome to GovUK Design React, the ultimate library for integrating the UK Government Design System with React! 🚀

Are you a React developer tired of reinventing the wheel to comply with the UK Government's design standards? Look no further! GovUK Design React is here to save you time and effort by providing pre-built, accessible, and fully customizable React components based on the GovUK Design System.

Demo

Check out the live example at https://rottitime.github.io/govuk-design-react/?path=/docs/configure-your-project--docs

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.

Installation

Install the library via npm or yarn:

npm install @rottitime/govuk-design-react

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

Check out our storybook documentation for live examples and comprehensive guides on how to use 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.

License

GovUK Design React is open source and licensed under the MIT License.

---

Feel free to explore, contribute, and make the most out of GovUK Design React. Together, we can build better and more accessible web applications for everyone. Happy coding! 🎉

---

If you have any questions or need further assistance, please don't hesitate to reach out via our GitHub issues page.

---

Related Links

Here are some helpful links related to GovUK Design React:

• GovUK Design System: Official website for the UK Government Design System.
• Storybook Documentation: Live examples and comprehensive guides on using each component.
• Package: NPM Package
• Contributing Guidelines: Learn how to contribute to the project.
• License: View the license details for GovUK Design React.
• Terms and Conditions for Non-Gov Sites: Guidelines for non-government sites on making their service look like GovUK.

Feel free to explore these resources for more information about GovUK Design React and its related components.

---

If you have any questions or need further assistance, please don't hesitate to reach out via our GitHub issues page.

• Terms and conditions for non Gov sites: https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk