![\"United](\"https://tdra.gov.ae/Assets/images/UAEGoldNew-01.png\")
\n\t\n\n\t\n\n
![\"The](\"https://tdra.gov.ae/Assets/images/TDRA-final-logo.svg\"){kind=logo}
\n\t\n\n\n# The United Arab Emirates Design System\n\nThe design system has been created based on research and information collected from in-depth studies conducted on user behaviour and benchmarking best practices.\n\nThe 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.\n\n---\n\n## Objective\n\nThe 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.\n\n---\n\n## Documentation\n\nFor full documentation, visit [UAE Design System](https://designsystem.gov.ae).\n\n## Getting started\n\nThe design system is built with standards and components that will help you build websites faster and with a consistent UI adhering to accessibility principles.\n\nThe design system is built with [TailwindCSS](https://tailwindcss.com) and to get started, you simply need to add the the
@aegov/design-system plugin to your existing or new TailwindCSS project.\n\nFor installation instructions, go to [designsystem.gov.ae/docs/installation](https://designsystem.gov.ae/docs/installation)\n\n### How to install the plugin.\n\nIf you want to install the package via the NPM CLI, you can use the following:\n\n\nnpm install @aegov/design-system\n\n\nIf you want to add the package to your package.json file, you can use the following:\n\n
\n...\n{\n\t\"dependencies\": {\n \t\"@aegov/design-system\": \"^2.0\"\n\t}\n}\n...\n\n\n## The use of JavaScript\n\nThe design system aims to provide guidelines and components, focusing on the look and feel of each component, block and pattern. To faciliate the easy use of components and blocks, each of them have relevant code example. Developers can use the provided code examples to add components and blocks to their project.\n\nSome components depend on the use of JavaScript. The design system does not mandate the use of the bundled JavaScript library, however recommend's it's use. The bundled JavaScript is forked from [Flowbite's JS](https://github.com/themesberg/flowbite) library. \n\nIf a developer chooses not to use the bundled JavaScript, it is expected that the functionality and interaction of each component needs to be consistent to what is available on the design system website.\n\n## What more is available\n\nThe design system also includes:\n\n- [Guidelines](https://designsystem.gov.ae/guidelines)\n- [Components](https://designsystem.gov.ae/docs/components)\n- [Blocks](https://designsystem.gov.ae/docs/blocks)\n- [Patterns](https://designsystem.gov.ae/docs/patterns)\n- [Assets, tools and templates](https://designsystem.gov.ae/resources/assets-and-tools)\n- [Roadmap of development](https://designsystem.gov.ae/resources/roadmap)\n\n## Report an issue\n\nTo report a bug, an issue and for help, you can [submit an issue](https://github.com/TDRA-ae/aegov-dls/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)","readmeFilename":"README.md"}