Key components of DIGIT-UI


This page provides the architecture and key features of the DIGIT UI. Click on the broader headings below to find the details.

Frontend Components

Broadly, the DIGIT UI frontend components are categorized as below:

CSS Library

The CSS Library contains all the classes both in the module and compiled form.

This can be imported using import "@egovernments/digit-ui.css/Button"or full CSS import using import "@egovernments/digit-ui.css"

Component Libraries

The Component Library contains a set of all required components defined in it.

Libraries & Utils

The libraries and utils contain the following:

  • Localization workflows

  • API Handling Strategies - Centralize API caching and handling strategies within shared functions, accessible by all modules. This ensures consistency and efficiency across the application.

  • Localisation


The module is a closed system for states, allowing access only to node_modules or CDNs. State-specific components can be provided during the module's initialization in the employee or citizen application.

Below is an illustration of how the module structure looks like:

Modules contain the following inbuilt

  • Theme - this may change if we later decide to use any css-in-js library, like styled-components.

  • Components

  • Routes

  • State management

  • Business logic

  • API integrations


  1. The first line contains the Architecture Component name or info

  2. The second line contains an npm package and a template in brackets for creating the component.


  • Easy-to-use CLI

  • Handles all modern JS features

  • Bundles commonjs and es module formats

  • create-react-app for example usage and local dev for React-based libraries

  • Rollup for bundling

  • Babel for transpiling

  • Supports complicated peer-dependencies

  • Supports CSS modules


The templates have the following folder structure: Components related to the template are inside the src folder. An example is provided to demonstrate the app created by the template.


We have two main React Apps:

  1. micro-ui-internals

    • This is meant for the eGov development team to build components and default modules.

    • It contains the following modules:

      • CSS Library

      • UI Components (presently react-components)

      • Utils Library: Contains Services, Localization handling and React Hooks.

      • UI Modules

        • Core - containing login, routing and global state.

        • PGR

        • FSM

        • PT

        • Payment

        • etc ...

  2. micro-ui

    • This is meant for the state team to manage, make changes, and deploy

    • It allows the import of digit-ui-internals modules

    • Customizations

      • View

      • Services

    • Build and deploy scripts

      • Dockerfile & nginx.conf

      • build-config.yaml

Employee / Citizen App

The app imports the developed module.

import './index.css' import { initPGR } from '@egovernments/pgr-module'; import punjabLogo from './assets/logo.png' const theme = { "--primary-color": "#3f51b5", "--text-color": "#212121" } const PGRComponents = { "logo": punjabLogo } const initPunjabPGR = (onRouteChange) => initPGR({ state: "pb", element: "#appWrapper", components: PGRComponents, onRouteChange, theme }); export default initPunjabPGR;

In the next phase, we can merge the Employee and Citizen apps into one app with role-based permissions and content.

Prerequisite reference study materials

Troubleshoot using the Browser Network Tab

Last updated

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.