@aegov/design-system-react/README.md

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

<div>
<a  href="https://u.ae/">
<img  src="https://tdra.gov.ae/Assets/images/UAEGoldNew-01.png"  alt="United Arab Emirates"  width="100"  height="100">
</a>
</div>
<p>&nbsp;</p>
<div>
<a  href="https://tdra.gov.ae/">
<img  src="https://tdra.gov.ae/Assets/images/TDRA-final-logo.svg"  alt="The Telecommunication and Digital Government Regulatory Authority of the United Arab Emirates"  height="40">
</a>
</div>
<p>&nbsp;</p>

# The United Arab Emirates Design System - React

The design system has been created based on research and information collected from in-depth studies conducted on user behaviour and benchmarking best practices.

The purpose of the design system is to create a set of components, blocks and patterns with detailed guidelines on how to create UI for websites and application of Federal Government Entities (FGE's) of the United Arab Emirates. This system is designed primarily for content specialists, user interface (UI) designers, developers, user researchers and digital operations teams of FGE's.

This the a package of the original UAE design system, that is built for the React library. You can learn more about the original package of the design system by visiting [https://github.com/TDRA-ae/aegov-dls](https://github.com/TDRA-ae/aegov-dls) 

---

## Objective

The system aims to unify the digital presence of FGE's. It seeks to position the UAE as a pioneer in the provision of digital services as measured by the United Nation's Online Services Index and in line with the UAE Government Charter for Future Services.

## Why a React package

A survey amongst designers and developers working directly or indirectly for Federal Government Entities in the United Arab Emirates revealed that the most sort-after frontend stack for development of web based applications and website was React. Hence, the decision to create a dedicated package.

## Documentation

For full documentation, visit [UAE Design System](https://designsystem.gov.ae).

### How to install the plugin.

If you want to install the package via the NPM CLI, you can use the following:

<pre>
npm install @aegov/design-system-react
</pre>

If you want to add the package to your package.json file, you can use the following:

<pre>
...
{
	"dependencies": {
    	"@aegov/design-system-react": "^1.0"
	}
}
...
</pre>

## What more is available

The design system also includes:

- [Guidelines](https://designsystem.gov.ae/guidelines)
- [Components](https://designsystem.gov.ae/docs/components)
- [Blocks](https://designsystem.gov.ae/docs/blocks)
- [Patterns](https://designsystem.gov.ae/docs/patterns)
- [Assets, tools and templates](https://designsystem.gov.ae/resources/assets-and-tools)
- [Roadmap of development](https://designsystem.gov.ae/resources/roadmap)

## Report an issue

To report a bug, an issue and for help, you can [submit an issue](https://github.com/TDRA-ae/aegov-dls-react/issues) on GitHub. We also encourage you to join our [GitHub discussions](https://github.com/orgs/TDRA-ae/discussions) for help from the community. For more information and details, you can also visit [tdra.gov.ae](https://tdra.gov.ae)