# Dashboard & My Applications / Profile & Preferences Profile and preferences management including Aadhaar-linked information, personal details, linked accounts, notification toggles, and account deletion. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-dashboard-my-applications-profile-preferences--introduction ## Pattern variants - Profile & Preferences: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-dashboard-my-applications-profile-preferences--profile-preferences ## When to use this pattern Use Dashboard & My Applications / Profile & Preferences 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 / Profile & Preferences. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Patterns

Profile & Preferences

Profile management with Aadhaar-linked information, editable personal details, verification badges, linked accounts, notification toggles, and account deletion.

person

User Profile

User card with avatar, verification tags (Mobile verified, Aadhaar linked), and edit button.

badge

Aadhaar-linked Info

Form fields for first name, date of birth, gender, and Aadhaar number with UIDAI update option.

link

Linked Accounts

Connected services including DigiLocker, UMANG app, and bank account for DBT with status indicators.

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

Profile & Preferences

Profile management with Aadhaar-linked information, editable personal details, verification badges, linked accounts, notification toggles, and account deletion.

person

User Profile

User card with avatar, verification tags (Mobile verified, Aadhaar linked), and edit button.

badge

Aadhaar-linked Info

Form fields for first name, date of birth, gender, and Aadhaar number with UIDAI update option.

link

Linked Accounts

Connected services including DigiLocker, UMANG app, and bank account for DBT with status indicators.

); export default DashboardMyApplicationsProfilePreferencesExample1Demo; ``` Angular: ```html
Patterns

Profile & Preferences

Profile management with Aadhaar-linked information, editable personal details, verification badges, linked accounts, notification toggles, and account deletion.

person

User Profile

User card with avatar, verification tags (Mobile verified, Aadhaar linked), and edit button.

badge

Aadhaar-linked Info

Form fields for first name, date of birth, gender, and Aadhaar number with UIDAI update option.

link

Linked Accounts

Connected services including DigiLocker, UMANG app, and bank account for DBT with status indicators.

``` ### 2. Profile Preferences — Profile & Preferences HTML: ```html

Profile & Preferences

Manage your account details, linked services and notifications

avatar

Ramesh Kumar

check_circle Mobile verified check_circle Aadhaar linked

Aadhaar-linked Information

Personal information

Language preference

Language changes apply immediately across the portal.

Linked accounts

  • DigiLocker
    check_circle Linked
    Access and share your digital documents
  • UMANG App
    warning Not linked
    Unified access to government services
  • Bank account for DBT ******7842 · State Bank of India

Notification preferences

  • SMS +91 98765 43210
  • Email r•••••h@gmail.com
  • App notifications Push alerts on this device
  • WhatsApp

Delete account

Permanently delete your account and all data. 30-day grace period to restore before it is final.

Delete your account?

This permanently deletes your account and all associated data. You will have a 30-day grace period to restore it — after that, deletion is final and cannot be undone.

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

Profile & Preferences

Manage your account details, linked services and notifications

avatar

Ramesh Kumar

check_circle Mobile verified check_circle Aadhaar linked

Aadhaar-linked Information

Personal information

Language preference

Language changes apply immediately across the portal.

Linked accounts

  • DigiLocker
    check_circle Linked
    Access and share your digital documents
  • UMANG App
    warning Not linked
    Unified access to government services
  • Bank account for DBT ******7842 · State Bank of India

Notification preferences

  • SMS +91 98765 43210
  • Email r•••••h@gmail.com
  • App notifications Push alerts on this device
  • WhatsApp

Delete account

Permanently delete your account and all data. 30-day grace period to restore before it is final.

Delete your account?

This permanently deletes your account and all associated data. You will have a 30-day grace period to restore it — after that, deletion is final and cannot be undone.

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

Profile & Preferences

Manage your account details, linked services and notifications

avatar

Ramesh Kumar

check_circle Mobile verified check_circle Aadhaar linked

Aadhaar-linked Information

Personal information

Language preference

Language changes apply immediately across the portal.

Linked accounts

  • DigiLocker
    check_circle Linked
    Access and share your digital documents
  • UMANG App
    warning Not linked
    Unified access to government services
  • Bank account for DBT ******7842 · State Bank of India

Notification preferences

  • SMS +91 98765 43210
  • Email r•••••h@gmail.com
  • App notifications Push alerts on this device
  • WhatsApp

Delete account

Permanently delete your account and all data. 30-day grace period to restore before it is final.

Delete your account?

This permanently deletes your account and all associated data. You will have a 30-day grace period to restore it — after that, deletion is final and cannot be undone.

```