Skip to content

feat: add reusable glassmorphic Modal component#1117

Open
manasvi-sahare wants to merge 1 commit into
SB2318:webfrom
manasvi-sahare:feat/modal-component
Open

feat: add reusable glassmorphic Modal component#1117
manasvi-sahare wants to merge 1 commit into
SB2318:webfrom
manasvi-sahare:feat/modal-component

Conversation

@manasvi-sahare
Copy link
Copy Markdown

@manasvi-sahare manasvi-sahare commented Jun 5, 2026

PR Description

Adds a reusable Modal component with glassmorphic backdrop, smooth animations,
and full accessibility support as requested in the issue.

Changes made:

  • Created src/components/ui/Modal.tsx
  • Added Modal export to src/components/ui/index.ts
  • Glassmorphic backdrop using backdrop-blur and semi-transparent overlay
  • Fade-in / slide-up entry and exit animations via CSS keyframes
  • Focus trap with Tab/Shift+Tab cycling inside modal
  • Closes on Escape key and backdrop click
  • Body scroll locked via overflow-hidden on <body> while modal is open
  • Full ARIA support: role="dialog", aria-modal, aria-labelledby
  • Supports props: isOpen, onClose, title, children, size (sm/md/lg/xl)

Type of Change

  • New feature (change which adds functionality)

Select your work-area

  • Frontend

Related Issue

https://github.com/SB2318/UltimateHealth/issues/ISSUE_NUMBER

Add your Work Example

📷 (take a screenshot of the modal running in your browser and upload it here)

Fixes

#closes 875

Checklist

  • I have updated my branch and synced it with the project's 'develop' branch before making this PR.
  • I have optimized the file changes.
  • I have added a snapshot of my work example.
  • I have made a PR to the project's develop branch.

Undertaking

  • My code follows the style guidelines of this project.
  • I have performed a self-review of my code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have made corresponding changes to the documentation.
  • I have checked for plagiarism and assure its authenticity.
  • I have read and followed the code of conduct for this repository. I understand that violation of this undertaking may have legal consequences.
  • I Agree

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 5, 2026

Thank you @, for creating the PR and contributing to our UltimateHealth project 💗.
Our team will review the PR and will reach out to you soon! 😇
Make sure that you have marked all the tasks that you are done with ✅.
Thank you for your patience! 😀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@manasvi-sahare @m-sahare