# Dashboard & My Applications / Empty State Empty state pattern for when a citizen has no active applications, featuring a call-to-action and popular service suggestions. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-dashboard-my-applications-empty-state--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-dashboard-my-applications-empty-state--full-screen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-dashboard-my-applications-empty-state--card ## When to use this pattern Use Dashboard & My Applications / Empty State when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Dashboard & My Applications / Empty State. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Empty State - No Active Applications HTML: ```html

inbox

No active applications

Start your application easily by clicking on the button below.

Popular services to get started

Income Certificate

Proof of annual family income

Caste Certificate

SC / ST / OBC category proof

Domicile Certificate

Proof of residence in the state

``` React: ```jsx import React from 'react'; const DashboardMyApplicationsEmptyStateExample1Demo = () => ( <>

inbox

No active applications

Start your application easily by clicking on the button below.

Popular services to get started

Income Certificate

Proof of annual family income

Start now arrow_forward

Caste Certificate

SC / ST / OBC category proof

Start now arrow_forward

Domicile Certificate

Proof of residence in the state

Start now arrow_forward

); export default DashboardMyApplicationsEmptyStateExample1Demo; ``` Angular: ```html

inbox

No active applications

Start your application easily by clicking on the button below.

Popular services to get started

Income Certificate

Proof of annual family income

Caste Certificate

SC / ST / OBC category proof

Domicile Certificate

Proof of residence in the state

``` ### 2. Full Screen — Empty State - No Active Applications HTML: ```html

inbox

No active applications

Start your application easily by clicking on the button below.

Popular services to get started

Income Certificate

Proof of annual family income

Caste Certificate

SC / ST / OBC category proof

Domicile Certificate

Proof of residence in the state

``` React: ```jsx import React from 'react'; const DashboardMyApplicationsEmptyStateExample2Demo = () => ( <>

inbox

No active applications

Start your application easily by clicking on the button below.

Popular services to get started

Income Certificate

Proof of annual family income

Start now arrow_forward

Caste Certificate

SC / ST / OBC category proof

Start now arrow_forward

Domicile Certificate

Proof of residence in the state

Start now arrow_forward

); export default DashboardMyApplicationsEmptyStateExample2Demo; ``` Angular: ```html

inbox

No active applications

Start your application easily by clicking on the button below.

Popular services to get started

Income Certificate

Proof of annual family income

Caste Certificate

SC / ST / OBC category proof

Domicile Certificate

Proof of residence in the state

```