React Card & Modal Components - Accessible Demo | Focus Trap, ARIA & Portal

Card Components

Card Variants

Four variants: default, elevated, outlined, compact. Interactive mode supports keyboard (Enter/Space) and click.

Default card

Elevated card

Outlined card

Compact card

Props & Accessibility

title, subtitle, image, actions
variant: default | elevated | outlined | compact
interactive → role="button", tabIndex=0
Enter/Space to activate when interactive
PropTypes validation

Modal Component

Portal & ARIA

createPortal → #modal-root
role="dialog", aria-modal="true"
aria-labelledby, aria-describedby
Close button aria-label
Screen reader "Modal opened" announcement

Sizes & Behavior

small (400px), medium (600px), large (800px), fullscreen
closeOnOverlayClick, closeOnEscape
Body scroll lock when open
Focus trap via useFocusTrap

React Hooks

useFocusTrap

Keeps focus inside modal; restores on close. Tab/Shift+Tab wrap; Escape restores focus.

const modalRef = useFocusTrap(isOpen);
// Attach ref to modal content container
<div ref={modalRef} className="modal">
  {children}
</div>

usePrefersReducedMotion

matchMedia('(prefers-reduced-motion: reduce)'). Respect system preference.

const prefersReducedMotion = usePrefersReducedMotion();
// Disable animations when true
className={prefersReducedMotion ? 'app--no-motion' : ''}

useModal

Reusable open/close state and optional payload.

const { isOpen, open, close, toggle, payload } = useModal();
<Modal isOpen={isOpen} onClose={close} title="...">
  ...
</Modal>

SettingsPanel & Accessibility

SettingsPanel

Dense layout toggle (tighter spacing)
Disable animations (session)
System "Reduce motion" notice when set
aria-label, aria-describedby on options

Accessibility

Focus trap in modal
Keyboard: Tab, Enter, Space, Escape
ARIA attributes throughout
prefers-reduced-motion in CSS
prefers-contrast: high support

Complete Feature Set

Components

Card (4 variants, interactive)
Modal (portal, focus trap, 4 sizes)
SettingsPanel (dense, disable animations)

Hooks & Utils

useFocusTrap
usePrefersReducedMotion
useModal
utils/constants.js

About This Project

Project Overview

React Card & Modal Components is an accessible React component library with Card (default, elevated, outlined, compact), Modal (createPortal, focus trap, ARIA), and SettingsPanel. Built with React 18, Create React App, PropTypes, and plain CSS. Focus trap, keyboard navigation, screen reader support, and reduced-motion friendly.

By Molla Samser (RSK World). Designer & Tester: Rima Khatun. 2026.

Quick Stats

Version: 1.0.0

License: MIT

React: 18.2.0

Stack: CRA, PropTypes, CSS

Project Structure

react-card-modal/
├── public/index.html  (#root, #modal-root)
├── src/
│   ├── components/
│   │   ├── Card.js, Card.css
│   │   ├── Modal.js, Modal.css
│   │   └── SettingsPanel.js, SettingsPanel.css
│   ├── hooks/
│   │   ├── useFocusTrap.js
│   │   ├── usePrefersReducedMotion.js
│   │   └── useModal.js
│   ├── utils/constants.js
│   ├── App.js, App.css
│   ├── index.js, index.css
├── package.json, README.md, LICENSE

SEO & Keywords

Primary Keywords

react card component
react modal component
focus trap
ARIA
createPortal
react portal
accessible modal
useFocusTrap
usePrefersReducedMotion
useModal
react accessibility
WCAG
keyboard navigation
reduced motion
RSK World

Page SEO

100%

SEO-Optimized

✓

Meta Title & Description

✓

Open Graph

✓

Semantic HTML

Semantic headings (h1, h2, h3), meta description, keywords, canonical URL, author, and Open Graph tags for React Card & Modal Components demo.

Step-by-Step Installation Guide

Prerequisites

Before installing, ensure you have:

Node.js – version 14 or higher (18.x recommended). Check with node -v
npm – comes with Node.js. Check with npm -v
A code editor (e.g. VS Code, Cursor) and a terminal/command prompt

Installation Steps

Download the project Download react-card-modal.zip from the project page (use the "Download Source Code" button above) or clone the repository if you have the repo URL.
Extract the archive Unzip react-card-modal.zip into a folder of your choice (e.g. react-card-modal). Avoid paths with spaces or special characters.
Open a terminal in the project folder cd react-card-modal (or your folder name). On Windows you can open the folder in File Explorer and type cmd or powershell in the address bar, or use "Open in Terminal" from your editor.
Install dependencies Run npm install. Wait until all packages are installed. This installs React, react-dom, react-scripts, and prop-types.
Start the development server Run npm start. The app will open in your browser at http://localhost:3000. If it doesn’t, open that URL manually. Leave the terminal open while developing.
Optional: build for production Run npm run build. This creates an optimized build in the build folder, ready to deploy to any static host.
Optional: run tests Run npm test to run the test suite (Create React App default setup).

What You’ll See After npm start

Header: "React Card & Modal Components" with author info
Settings panel: Dense layout & Disable animations toggles
Card grid: 4 clickable cards (Interactive, Outlined, Compact, Default)
Modal features grid and "Quick Demo" buttons
Click any card or "Open Sample Modal" to see the modal with focus trap
"Keyboard Shortcuts" button opens a small modal with Tab / Escape hints

Integrate Into Your App

Copy src/components, src/hooks, src/utils into your React project
In your public/index.html (or root HTML), add <div id="modal-root"></div> so Modal can use createPortal
Import Card, Modal, SettingsPanel and hooks as needed; ensure your app uses React 18

Troubleshooting

Port 3000 already in use – Stop the other process or run npm start and choose a different port when prompted (e.g. 3001).
npm install fails – Try npm cache clean --force, then npm install again. Ensure Node 14+ and a stable internet connection.
Modal doesn’t show or focus trap doesn’t work – Ensure #modal-root exists in your HTML and useFocusTrap ref is attached to the modal content div.
Blank page – Check the browser console for errors. Confirm id="root" exists and your entry file (e.g. index.js) renders the app into it.

Available Scripts

npm start

Dev Server

npm run build

Production

npm test

Testing

Detailed Feedback About the Project

What Works Well

Accessibility – Focus trap, ARIA attributes, keyboard support (Tab, Enter, Space, Escape), and screen reader announcement make the modal and cards usable for keyboard and assistive technology users.
Portal rendering – Modal is rendered via createPortal into #modal-root, so it stacks correctly and doesn’t get clipped by overflow or z-index issues.
Hooks – useFocusTrap, usePrefersReducedMotion, and useModal are small, reusable, and easy to drop into other projects.
Reduced motion – System preference is respected (usePrefersReducedMotion + CSS prefers-reduced-motion), and the Settings panel lets users disable animations for the session.
Code structure – Clear separation: components, hooks, utils/constants; PropTypes on components; BEM-style CSS per component.
No heavy dependencies – Plain CSS and PropTypes; no styled-components or Framer Motion, so the bundle stays light and the project is easy to understand and customize.

Best Suited For

Building accessible dialogs and card-based UIs in React 18 apps.
Learning React portals, focus management, and ARIA in a small, self-contained codebase.
Projects that need WCAG-friendly modals and cards without adding a large UI library.

Tips & Possible Improvements

Modal exit animation: the CSS defines .modal-overlay.closing keyframes, but the component unmounts immediately. For a smooth close, you could add a short “closing” state and run the exit animation before unmounting.
Constants in src/utils/constants.js (e.g. ARIA_LABELS, FOCUSABLE_ELEMENTS_SELECTOR) could be used inside components for consistency and easier i18n later.
If you need TypeScript, adding type definitions for Card, Modal, and the hooks would make the project even easier to adopt in TS codebases.

Summary

React Card & Modal Components is a focused, accessible React UI kit: Card (4 variants, interactive), Modal (portal, focus trap, ARIA), and SettingsPanel, plus three hooks. It’s well-structured, light on dependencies, and strong on accessibility. Ideal for learning or for production apps that need accessible cards and modals without a full design system. By Molla Samser (RSK World), 2026.

Credits & Contact

Author

rskworld.in | +91 93305 39277 | info@rskworld.com

License

MIT License. Use in personal and commercial projects. Attribution to Molla Samser / RSK World appreciated. See LICENSE file.