# Feedback & Communication / Verifying Document Document verification progress with real-time timeline tracking and status updates. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-verifying-document--introduction ## Pattern variants - Verifying Document: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-verifying-document--verifying-document ## When to use this pattern Use Feedback & Communication / Verifying Document 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 Feedback & Communication / Verifying Document. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Patterns

Verifying Document

Document verification progress with real-time timeline tracking and status updates.

description

Verifying Document

Document verification progress with real-time timeline tracking and status updates.

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

Verifying Document

Document verification progress with real-time timeline tracking and status updates.

description

Verifying Document

Document verification progress with real-time timeline tracking and status updates.

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

Verifying Document

Document verification progress with real-time timeline tracking and status updates.

description

Verifying Document

Document verification progress with real-time timeline tracking and status updates.

``` ### 2. Verifying Document — Verifying Document HTML: ```html
arrow_back Back

Verifying your Income Certificate document

We are checking your uploaded PDF in real time. Each step below updates as the system completes it — keep this page open until all checks finish.

Income Certificate

PDF document · 1.2 MB

Verifying
check
22 June 2026 File format and size within limits Passed
check
25 June 2026 Document is readable and not blurred Passed
31 June 2026 Figures match the declared income Checking
``` React: ```jsx import React from 'react'; const FeedbackCommunicationVerifyingDocumentExample2Demo = () => ( <>
arrow_back Back

Verifying your Income Certificate document

We are checking your uploaded PDF in real time. Each step below updates as the system completes it — keep this page open until all checks finish.

Income Certificate

PDF document · 1.2 MB

Verifying
check
22 June 2026 File format and size within limits Passed
check
25 June 2026 Document is readable and not blurred Passed
31 June 2026 Figures match the declared income Checking
); export default FeedbackCommunicationVerifyingDocumentExample2Demo; ``` Angular: ```html
arrow_back Back

Verifying your Income Certificate document

We are checking your uploaded PDF in real time. Each step below updates as the system completes it — keep this page open until all checks finish.

Income Certificate

PDF document · 1.2 MB

Verifying
check
22 June 2026 File format and size within limits Passed
check
25 June 2026 Document is readable and not blurred Passed
31 June 2026 Figures match the declared income Checking
```