help@rskworld.in +91 93305 39277

Theme Settings

Color Scheme

Display Options

Dark Mode

Sticky Header

Show Top Bar

React Card & Modal Components rskworld.in

Cards • Modals • Focus Trap • ARIA • Portal • Hooks • Animations • Accessibility — Accessible React Card and Modal components with useFocusTrap, usePrefersReducedMotion, useModal. Create React App, PropTypes, CSS animations, reduced-motion support. React 18. By rskworld.in.

Card Variants Modal Portal Focus Trap ARIA Support React Hooks Animations Accessibility Reduced Motion

Download React Card & Modal Components Live React Card & Modal Web Demo

View Files

React Card & Modal Components - Card Variants & Modal - RSK World

Cards Modals Hooks A11y React

React Card & Modal Components is an accessible React component library with Card (default, elevated, outlined, compact variants), Modal (createPortal to #modal-root, focus trap, ARIA, overlay/ESC close), and SettingsPanel. Custom hooks: useFocusTrap (keeps focus inside modal, restores on close), usePrefersReducedMotion (matchMedia), useModal (open/close state and payload). Built with React 18, Create React App, PropTypes, and plain CSS with animations and reduced-motion support. Ideal for accessible UI, keyboard users, and screen readers. 2026 by RSK World.

If you find this React Card & Modal Components useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download React Card & Modal Components

Card Component

Card with 4 variants (default, elevated, outlined, compact), optional image, title, subtitle, body, and actions footer. Interactive mode with role="button", tabIndex, Enter/Space keyboard support. PropTypes validation.

Card: React component with 4 variants (default, elevated, outlined, compact), optional image with loading="lazy", header (title, subtitle), body (children), and optional actions footer. BEM-style CSS (Card.css) with cardFadeIn animation.
Interactive mode: When interactive={true}, card has role="button", tabIndex={0}, and onKeyDown for Enter/Space to trigger onClick. Cursor pointer, hover lift, and active state for accessibility.
Card props: children, title, subtitle, image, actions, variant (default|elevated|outlined|compact), interactive, onClick, className. All validated with PropTypes.
Styling: Responsive design in Card.css, high-contrast media query (prefers-contrast: high), and reduced-motion support. Elevated variant has stronger shadow and hover lift; outlined has border only; compact has tighter padding.
Accessibility: Semantic
, optional image alt from title, keyboard activation for interactive cards, and proper focus outline for keyboard users.

Modal Component

Modal rendered via createPortal into #modal-root. Focus trap, ARIA (role="dialog", aria-modal, aria-labelledby/describedby), overlay/ESC close, body scroll lock, screen reader announcement.

Portal: Modal content is rendered with createPortal(modalContent, document.getElementById("modal-root")) so it sits outside app DOM for correct z-index and stacking.
Focus trap: useFocusTrap(isOpen) returns a ref attached to modal content; Tab/Shift+Tab cycle within modal, focus restored to previous element on close. focusin capture prevents focus escaping.
ARIA: Overlay has role="dialog", aria-modal="true", aria-labelledby="modal-title", aria-describedby="modal-content". Header has id="modal-title", main has id="modal-content". Close button has aria-label="Close modal".
Behavior: closeOnOverlayClick, closeOnEscape, showCloseButton. Body overflow hidden when open. Temporary live region announces "Modal opened". Sizes: small (400px), medium (600px), large (800px), fullscreen.
Accessibility: Screen reader support, keyboard (Escape to close), and click-outside to close. Modal.css includes reduced-motion and high-contrast media queries.

SettingsPanel Component

SettingsPanel for accessibility and display toggles: dense layout and disable animations. Shows system reduced-motion notice when prefers-reduced-motion is set. ARIA labels and hints.

SettingsPanel: Aside with aria-label="Accessibility and display settings". Two checkboxes: Dense layout (tighter spacing) and Disable animations (session-only). Both with aria-describedby and hint text.
Reduced motion: When usePrefersReducedMotion() is true, displays a notice: "Your system is set to Reduce motion — animations are already minimized." with role="status" and aria-live="polite".
Integration: App.js uses denseLayout and disableAnimations state plus prefersReducedMotion to apply app--dense and app--no-motion classes, reducing layout spacing and disabling animations.
Props: denseLayout, disableAnimations, onDenseLayoutChange, onDisableAnimationsChange, prefersReducedMotion, className. All PropTypes validated.
Styling: SettingsPanel.css with glass-style panel, responsive and reduced-motion media queries.

useFocusTrap Hook

Keeps focus inside a container (e.g. modal). Stores previous focus, focuses first focusable element on activate, wraps Tab/Shift+Tab, restores focus on deactivate. focusin capture prevents escape.

useFocusTrap(isActive): Returns a ref to attach to the trap container. When isActive and containerRef.current exist, stores document.activeElement, queries focusable elements (button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])).
Tab handling: First focusable gets focus on activate (setTimeout 100ms). Tab from last focuses first; Shift+Tab from first focuses last. Prevents default to keep focus inside.
Escape: On Escape key, restores focus to previousFocusRef.current. Modal also uses Escape to close, so focus is restored when modal unmounts.
focusin: Listener in capture phase checks if event.target is inside container; if not, prevents default and focuses first focusable. Cleanup removes listeners and restores focus.
Usage: Modal.js calls useFocusTrap(isOpen) and passes modalRef to the inner div with role="document".

usePrefersReducedMotion & useModal Hooks

usePrefersReducedMotion returns matchMedia("(prefers-reduced-motion: reduce)").matches and subscribes to change. useModal provides isOpen, open, close, toggle, payload, setPayload for reusable modal state.

usePrefersReducedMotion: useState initial value from matchMedia; useEffect adds change listener and returns cleanup. Used in App for app--no-motion and in SettingsPanel to show system notice. SSR-safe (typeof window check).
useModal(initialPayload): useState for isOpen and payload. open(data), close(), toggle(). setPayload when opening; reset payload on close. Used in App for Keyboard Shortcuts modal.
Animations: index.css and component CSS use @media (prefers-reduced-motion: reduce) to disable or shorten animations. App combines disableAnimations and prefersReducedMotion for app--no-motion.
Constants: utils/constants.js has PROJECT_INFO, CARD_VARIANTS, MODAL_SIZES, ANIMATION_DURATIONS, BREAKPOINTS, ARIA_LABELS, FOCUSABLE_ELEMENTS_SELECTOR, DEFAULT_CARD_PROPS, DEFAULT_MODAL_PROPS for reuse.
Project structure: src/components (Card, Modal, SettingsPanel), src/hooks (useFocusTrap, usePrefersReducedMotion, useModal), src/utils/constants.js, public/index.html with #root and #modal-root.

Accessibility & SEO

Full accessibility: focus trap, ARIA, keyboard (Tab, Enter, Space, Escape), screen reader live region, reduced-motion support, high-contrast media queries. Semantic HTML and touch targets.

Focus: Visible outline (index.css *:focus), min-height 44px for buttons (touch targets). useFocusTrap keeps modal focus inside and restores on close.
ARIA: Dialog role, aria-modal, aria-labelledby/describedby, aria-label on close button and SettingsPanel. sr-only class for screen-reader-only text. Live region for "Modal opened" announcement.
Keyboard: Enter/Space on interactive cards and buttons; Tab/Shift+Tab in modal; Escape to close modal. All interactive elements keyboard accessible.
Motion: prefers-reduced-motion in CSS (index.css, App.css, Card.css, Modal.css) and usePrefersReducedMotion in React. Optional "Disable animations" in SettingsPanel.
Contrast: prefers-contrast: high in CSS for stronger borders and emphasis. SEO: README and meta descriptions for React Card & Modal, focus trap, ARIA, portal.

Demo Application

App.js demonstrates Card grid (4 cards, variants), click-to-open modal with card content, SettingsPanel toggles, Keyboard Shortcuts modal (useModal), and Open Sample Modal. Feature list and demo controls.

App state: isModalOpen, selectedCard, denseLayout, disableAnimations; usePrefersReducedMotion(); useModal() for shortcuts modal. handleCardClick opens modal with card; closeModal clears selectedCard.
Sections: Header with title and author info; SettingsPanel; Card Components grid (4 cards with View Details / Quick Action buttons); Modal Features grid (Focus Trap, Keyboard, Animations, ARIA, Responsive, Portal); Quick Demo (Open Sample Modal, Keyboard Shortcuts, Regular Action).
Modals: Two Modal instances — one for Keyboard Shortcuts (small, useModal), one for card details/sample (medium, closeOnOverlayClick, closeOnEscape, showCloseButton). Card modal shows image, subtitle, content, and action list.
Styling: App.css with app, app--dense, app--no-motion; cards-grid, features-grid, demo-controls; .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-large; modal content classes; keyframes appFadeIn, headerSlideDown, sectionFadeIn.
Responsive: Media queries at 768px and 480px for padding, font sizes, grid columns, button width, modal buttons column layout.

Project Structure

Organized structure: src/components (Card, Modal, SettingsPanel with .css), src/hooks (useFocusTrap, usePrefersReducedMotion, useModal), src/utils/constants.js, public/index.html (#root, #modal-root).

Components: Card.js/css, Modal.js/css, SettingsPanel.js/css. Each has PropTypes and BEM-style classes. Modal uses createPortal and useFocusTrap.
Hooks: useFocusTrap.js (ref-based focus trap), usePrefersReducedMotion.js (matchMedia), useModal.js (open/close state and payload). No external hook library.
Utils: constants.js exports PROJECT_INFO, CARD_VARIANTS, MODAL_SIZES, ANIMATION_DURATIONS, BREAKPOINTS, ARIA_LABELS, FOCUSABLE_ELEMENTS_SELECTOR, default props. Used for consistency and documentation.
Entry: index.js creates root with createRoot(document.getElementById("root")), renders App in StrictMode. index.css: reset, body gradient, .sr-only, focus styles, prefers-reduced-motion.
Build: Create React App (react-scripts 5.0.1), React 18.2.0, react-dom 18.2.0, prop-types 15.8.1. No styled-components, Framer Motion, or Storybook.

What You Get

Complete React Card & Modal source: package.json, src/App.js, src/components (Card, Modal, SettingsPanel + CSS), src/hooks (useFocusTrap, usePrefersReducedMotion, useModal), src/utils/constants.js, public/index.html, README, LICENSE.

Source: package.json (React 18.2.0, react-scripts 5.0.1, prop-types 15.8.1). src/App.js with full demo; index.js, index.css, App.css.
Components: Card.js, Modal.js, SettingsPanel.js with Card.css, Modal.css, SettingsPanel.css. PropTypes, no TypeScript.
Hooks: useFocusTrap.js, usePrefersReducedMotion.js, useModal.js. Plain React (useState, useEffect, useRef, useCallback).
Public: index.html with
and
for portal. Meta description and title for SEO.
Docs: README.md with tech stack, components, hooks, getting started, project structure, project info, license. LICENSE MIT.

Usage & Integration

Run npm install and npm start. Import Card, Modal, SettingsPanel from components; useFocusTrap, usePrefersReducedMotion, useModal from hooks. Add #modal-root in HTML for Modal portal.

Installation: npm install then npm start. App runs at http://localhost:3000 (Create React App default).
Card: Import Card, pass title, subtitle, image, variant, interactive, onClick, actions. Use constants.CARD_VARIANTS for variant names.
Modal: Ensure document has #modal-root. Import Modal, pass isOpen, onClose, title, size (small|medium|large|fullscreen), closeOnOverlayClick, closeOnEscape, showCloseButton. Use useFocusTrap and useModal as needed.
SettingsPanel: Pass denseLayout, disableAnimations, onDenseLayoutChange, onDisableAnimationsChange, prefersReducedMotion (from usePrefersReducedMotion).
Production: npm run build. No env vars required. SEO: Use project title and description in your page meta; keywords: react card modal, focus trap, ARIA, accessibility.

Project Features

React Card & Modal Components with focus trap, ARIA, portal rendering, and reduced-motion support. React 18, Create React App, PropTypes, plain CSS. Accessible UI library.

Three components: Card (4 variants, interactive, keyboard), Modal (portal, focus trap, ARIA, 4 sizes), SettingsPanel (dense layout, disable animations, reduced-motion notice).
Three hooks: useFocusTrap (modal focus trap and restore), usePrefersReducedMotion (matchMedia), useModal (open/close and payload).
Accessibility: Focus trap, ARIA attributes, keyboard navigation, screen reader announcement, reduced-motion and high-contrast CSS, semantic HTML.
Styling: Plain CSS with BEM, keyframe animations, responsive breakpoints (480, 768px), prefers-reduced-motion and prefers-contrast media queries.
Stack: React 18.2.0, react-scripts 5.0.1, prop-types 15.8.1. No styled-components, Framer Motion, or Storybook. MIT License.

Credits & Acknowledgments

React Card & Modal Components by Molla Samser (RSK World). Designer & Tester: Rima Khatun. Accessible React UI with focus trap and ARIA. Built with React 18 and Create React App.

React Card & Modal Components: Accessible React component library for cards, modals, and settings. Free to use with attribution for educational and commercial projects. MIT License.
RSK World – Creator of React Card & Modal Components. More projects at rskworld.in.
Author: Molla Samser (RSK World). Designer & Tester: Rima Khatun. Website: https://rskworld.in. Contact: +91 93305 39277, info@rskworld.com. React Card & Modal Components © 2026 Molla Samser.
Third-party credits: React – UI library; Create React App – build tooling; PropTypes – runtime validation.
License: MIT. Use in personal and commercial projects; attribution to Molla Samser / RSK World appreciated. See LICENSE file for full terms.

Support & Contact

For React Card & Modal customization, accessibility questions or React training, please contact us.

Email: info@rskworld.com – React Card & Modal customization, accessibility, or integration help; RSK World.
Phone: +91 93305 39277 – direct contact for React Card & Modal support; RSK World, India.
Website: RSKWORLD.in – more React and UI/UX projects; download React Card & Modal and other open-source React libraries.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147 – RSK World.
Author: Molla Samser – creator of React Card & Modal Components; contact for credits, collaboration, or custom React work.
Documentation: README with getting started, components, hooks, project structure; inline comments in components and hooks for SEO-friendly documentation.
Technical support: help with focus trap, ARIA, useModal, or integrating Card/Modal into your React app; RSK World supports learners and teams.
Feature requests: suggest new variants, hooks, or accessibility improvements for future React Card & Modal updates.