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.

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.

For full documentation, visit UAE Design System.

The design system is built with standards and components that will help you build websites faster and with a consistent UI adhering to accessibility principles.

The design system is built with TailwindCSS and to get started, you simply need to add the the @aegov/design-system plugin to your existing or new TailwindCSS project.

For installation instructions, go to designsystem.gov.ae/docs/installation

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

npm install @aegov/design-system

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

...
{
	"dependencies": {
    	"@aegov/design-system": "^2.0"
	}
}
...

The 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.

Some 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 library.

If 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.

The design system also includes:

• Guidelines
• Components
• Blocks
• Patterns
• Assets, tools and templates
• Roadmap of development

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