# Consent & Declaration / Manage Data Sharing Consents Manage data sharing consents patterns for viewing and controlling active data sharing agreements across departments. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-manage-data-sharing-consents--manage-data-sharing-consents-full-screen ## Pattern variants - Manage Data Sharing Consents - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-manage-data-sharing-consents--manage-data-sharing-consents-full-screen - Manage Data Sharing Consents - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-manage-data-sharing-consents--manage-data-sharing-consents-card ## When to use this pattern Use Consent & Declaration / Manage Data Sharing Consents 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 Consent & Declaration / Manage Data Sharing Consents. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. C A R D_1 — Manage Data Sharing Consents - Card HTML: ```html

Third Party	Data Shared	Status	Action
Bank of India	Aadhaar, Name	Active	Required
Payment Corp	Transaction ID	Active	Required
SMS Gateway	Mobile Number	Active	Withdraw

Required consents cannot be withdrawn as they are necessary for the scheme to function.

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

Manage Your Data Sharing Consents

Scheme: PM Kisan

You can review and withdraw optional consents below.

Third Party	Data Shared	Status	Action
Bank of India	Aadhaar, Name	Active	Required
Payment Corp	Transaction ID	Active	Required
SMS Gateway	Mobile Number	Active	Withdraw

error_outline

Required consents cannot be withdrawn as they are necessary for the scheme to function.

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

Third Party	Data Shared	Status	Action
Bank of India	Aadhaar, Name	Active	Required
Payment Corp	Transaction ID	Active	Required
SMS Gateway	Mobile Number	Active	Withdraw

Required consents cannot be withdrawn as they are necessary for the scheme to function.

``` ### 2. F U L L S C R E E N_1 — Manage Data Sharing Consents - Full Screen HTML: ```html

Third Party	Data Shared	Status	Action
Bank of India	Aadhaar, Name	Active	Required
Payment Corp	Transaction ID	Active	Required
SMS Gateway	Mobile Number	Active	Withdraw

Required consents cannot be withdrawn as they are necessary for the scheme to function.

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

Manage Your Data Sharing Consents

Scheme: PM Kisan

You can review and withdraw optional consents below.

Third Party	Data Shared	Status	Action
Bank of India	Aadhaar, Name	Active	Required
Payment Corp	Transaction ID	Active	Required
SMS Gateway	Mobile Number	Active	Withdraw

error_outline

Required consents cannot be withdrawn as they are necessary for the scheme to function.

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

Third Party	Data Shared	Status	Action
Bank of India	Aadhaar, Name	Active	Required
Payment Corp	Transaction ID	Active	Required
SMS Gateway	Mobile Number	Active	Withdraw

Required consents cannot be withdrawn as they are necessary for the scheme to function.

```