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
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.
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.
For full documentation, visit UAE Design System.
If you want to install the package via the NPM CLI, you can use the following:
npm install @aegov/design-system-react
If you want to add the package to your package.json file, you can use the following:
...
{
"dependencies": {
"@aegov/design-system-react": "^1.0"
}
}
...
The design system also includes:
To report a bug, an issue and for help, you can submit an issue on GitHub. We also encourage you to join our GitHub discussions for help from the community. For more information and details, you can also visit tdra.gov.ae