React Component Generator Prompts: 25+ Tested UI & TypeScript Playbooks (2026)

Act as a Web Accessibility Specialist and Senior React Architect. Build a fully accessible, reusable Modal Dialog component in TypeScript and Tailwind CSS.

Architecture Requirements:
1. Component Compound Pattern: Support clean JSX syntax:
   `
`
     `Open Modal`
     ``
       `...`
       `...`
     ``
   `
`
2. Accessibility & WAI-ARIA Standards:
   - Mount via React Portal (`createPortal`) onto `document.body`.
   - `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, and `aria-describedby`.
   - Focus Management: Automatically focus the first interactive element upon open; restore focus to trigger element upon close.
   - Keyboard Navigation: Close modal on `Escape` key press.
   - Body Scroll Lock: Prevent background document scrolling when open.
3. Backdrop & Animation: Smooth backdrop overlay blur with subtle scale-in animation (`animate-in fade-in zoom-in-95`). Click on backdrop triggers close unless `disableBackdropClick={true}`.

Act as a Frontend Forms Specialist. Create a type-safe, accessible `FormField` component integrating `react-hook-form` and `zod`.

Component Specifications:
1. Generic Type Safety: The component must accept `TFieldValues extends FieldValues` and `TName extends FieldPath` to enforce exact key path autocompletion.
2. Structure & Layout:
   - Label with optional required asterisk (`*`).
   - Input field supporting prefix/suffix icons, clear button, and password visibility toggle.
   - Helper text / character counter.
   - Animated error message with `aria-live="polite"` and `id` linked to the input via `aria-describedby` and `aria-invalid="true"`.
3. Example Form Implementation:
   - Define a sample Zod schema (e.g., Enterprise Sign-up: corporate email, password with complexity regex, workspace slug).
   - Provide the complete form component demonstrating useForm, zodResolver, and async submit handling.

System Directive: You are a Staff Frontend Performance Engineer. Build a high-performance, virtualized Data Table in React 19 using `@tanstack/react-table` (v8) and `@tanstack/react-virtual` (v3).

Table Requirements:
1. Virtual Windowing: Only render rows currently visible in the viewport plus a 10-row overscan buffer. Capable of displaying 50,000 records with 60 FPS scrolling.
2. Core Interactive Features:
   - Sticky header row with sort indicators (Ascending, Descending, None).
   - Global debounced search filter across string columns.
   - Column visibility toggle menu.
   - Row selection checkboxes with indeterminate master checkbox in header.
3. Responsive & Visual Design:
   - Tailwind CSS dark-mode styling with zebra striping and subtle hover highlights.
   - Empty state illustration and skeleton loading state while data fetches.
4. TypeScript Definitions: Strongly typed generic `` schema with sample enterprise data (e.g., User ID, Name, Email, Role, Spend, Status, Last Login).

Act as a Senior UI/UX Engineer. Construct an accessible, fluid Kanban Board component in React using `@dnd-kit/core`, `@dnd-kit/sortable`, and Tailwind CSS.

Board Architecture:
1. Columns & Cards:
   - 3 Default Columns: `Backlog`, `In Progress`, `Done`.
   - Cards display Title, Priority Tag (Low/Med/High), Assignee Avatar, and Due Date.
2. Drag-and-Drop Capabilities:
   - Drag cards within the same column (reorder).
   - Drag cards across different columns (state change).
   - Visual Drag Overlay: Floating card preview under cursor with drop shadow and slight tilt.
3. Optimistic State & Callbacks:
   - Update local React state instantly upon drop; fire `onCardMove(cardId, sourceColumn, destColumn, newIndex)`.
4. Accessibility: Implement keyboard sensor (`KeyboardSensor`) so users can move cards using arrow keys per WCAG standards.

Act as a Dashboard UI Designer and Frontend Developer. Create a responsive `MetricCardGrid` component displaying key SaaS telemetry.

Component Features:
1. Grid Layout: 1 column on mobile, 2 columns on tablet, 4 columns on desktop (`grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4`).
2. Card Specs:
   - Metric Title (e.g., "Monthly Recurring Revenue").
   - Primary Number formatted with locale currency (e.g., "$128,450").
   - Delta Badge: Percentage change vs. last month with green arrow for positive, red for negative.
   - Mini Sparkline Chart: Embedded SVG sparkline showing trailing 30-day trajectory.
   - Hover Card Tooltip: Explains calculation methodology on hover.
3. Loading Skeleton: Shimmer skeleton loading state when data is pending.

System Directive: You are a React State Management Specialist. Write a production-ready custom hook `useOptimisticTodoMutation` in TypeScript using TanStack Query (`@tanstack/react-query` v5).

Hook Requirements:
1. Immediate UI Feedback: When a user toggles a todo item's status, update the TanStack Query cache immediately before the network request resolves.
2. Rollback Resilience: If the server API returns an HTTP 500 error or network failure:
   - Roll back the cache to the exact previous snapshot.
   - Fire a toast notification alerting the user of the sync failure.
3. Cache Synchronization: Ensure `onSettled` always invalidates the query key `['todos']` to maintain eventual consistency with the database.
4. Complete TypeScript Interface: Strongly type query cache data, mutation variables, and context snapshot.

Act as a Senior Frontend Core Architect. Write a robust, production-grade custom React hook `useLocalStorage` in TypeScript.

Technical Specifications:
1. SSR & Hydration Safety: Prevent Next.js hydration mismatch errors by deferring localStorage reads until after initial client mount (`useEffect` or `useSyncExternalStore`).
2. Type-Safe Serialization: Support custom JSON parsing with fallback to initial value if localStorage contains invalid JSON.
3. Multi-Tab Synchronization: Listen to `window.addEventListener('storage', ...)` and use `BroadcastChannel` so updating a value in Tab A instantly updates state in Tab B without a page refresh.
4. Error Handling: Gracefully catch `QuotaExceededError` when storage is full or in private browsing modes.

Act as an API Performance Engineer. Create a custom hook `useDebouncedSearch` in TypeScript.

Requirements:
1. Debounce Logic: Delay triggering the search function until the user stops typing for [DELAY_MS: default 300ms].
2. Race Condition Prevention: Automatically abort previous in-flight fetch requests via `AbortController` whenever a new keystroke occurs, ensuring only the latest query results are rendered.
3. States Exposed: Return `{ query, setQuery, results, isSearching, error, clear }`.
4. In-Memory LRU Cache: Cache the last 20 search query results to provide instant results on backspace.

System Directive: You are a Lead UI Motion Designer and React Engineer. Construct a fluid, multi-step Onboarding Wizard component using `framer-motion` and Tailwind CSS.

Component Requirements:
1. 4 Sequential Steps: (1) Account Profile, (2) Organization Details, (3) Plan Selection, (4) Integration Settings.
2. Motion & Transition Architecture:
   - Use `AnimatePresence` with custom `custom={direction}` to slide forward (right-to-left) or backward (left-to-right) depending on step progression.
   - Smooth height animation: The container smoothly resizes its height to fit each step's content without abrupt layout jumps.
3. Stepper Indicator: Visual progress bar and numbered step badges displaying completed, active, and upcoming states.
4. Validation Enforcer: Next button is disabled until current step form fields pass validation.

Act as a Staff Frontend Developer. Build a sleek Command Palette (`Cmd+K` / `Ctrl+K`) component in React and Tailwind CSS.

Features:
1. Keyboard Shortcut Listener: Global event listener toggling palette open on `Meta+K` or `Ctrl+K`.
2. Categorized Command Groups:
   - Navigation (Dashboard, Settings, Billing).
   - Quick Actions (Create Project, Invite Team Member, Toggle Dark Mode).
   - Recent Documents / Search History.
3. Keyboard Navigation: Arrow Up/Down to navigate items, `Enter` to execute, `Escape` to close.
4. Visual Styling: Frosted glass backdrop (`backdrop-blur-md bg-slate-900/80`), highlighted item states, and badge shortcuts (`⌘K`, `↵`).

Act as a UI Architecture Specialist. Build a responsive, collapsible Dashboard Sidebar navigation component in React and Tailwind CSS.

Specifications:
1. Dual-State Collapsible:
   - Expanded State (width 256px / `w-64`): Displays icons, text labels, and notification count badges.
   - Collapsed State (width 80px / `w-20`): Displays centered icons with floating tooltips on hover.
2. Nested Accordion Submenus: Expandable sub-links with smooth animation for multi-level navigation.
3. Mobile Responsive Drawer: Slides in from the left on mobile devices with an overlay backdrop when hamburger button is toggled.
4. Active Route Highlighting: Compares current route with link destination and applies distinct active pill styles.

System Directive: You are a Principal Quality Engineer and React Testing Specialist. Write an exhaustive test suite using Vitest and `@testing-library/react` for the component provided below.

Target Component:
"""
[PASTE REACT COMPONENT CODE]
"""

Test Suite Coverage Mandates:
1. User-Centric Interaction Testing: Use `@testing-library/user-event` (v14+) rather than `fireEvent`.
2. Accessibility Verification: Use `jest-axe` to run automated axe accessibility audits (`expect(await axe(container)).toHaveNoViolations()`).
3. State & Prop Matrix:
   - Default render state.
   - All variant states (loading, disabled, error).
   - Async API resolution and rejected network states.
   - Keyboard interaction assertions (Enter, Space, Escape, Tab focus order).
4. Zero Implementation Testing: Avoid querying internal state or private class names; query strictly by accessible role (`screen.getByRole`).

Act as a React Runtime Performance Auditor. The component below is causing laggy typing in input fields and frame drops during parent state updates.

Problematic Component Code:
"""
[PASTE LAGGING COMPONENT CODE]
"""

Audit Tasks:
1. Root-Cause Analysis: Identify why children re-render continuously (e.g., inline object references, non-memoized callback handlers, unstable context values).
2. Surgical Optimization:
   - Stabilize callback functions using `useCallback`.
   - Memoize expensive derived calculations using `useMemo`.
   - Wrap leaf components in `React.memo` with a custom comparison function if necessary.
3. Component Slicing: Extract rapidly updating state into isolated sub-components so the broader tree does not re-render.
4. Refactored Code: Output the complete, profiled, and hardened component code.

System Directive: You are a Design Systems Token Architect. Translate the Figma token JSON specifications below into a unified Tailwind CSS v3/v4 configuration and CSS custom property root stylesheet.

Figma Design Tokens JSON:
"""
[PASTE FIGMA TOKENS JSON: Colors, Semantic Brand Tones, Box Shadows, Border Radii, Font Scales]
"""

Deliverables:
1. CSS Custom Properties (`globals.css`): Map raw hex colors to semantic HSL/OKLCH custom properties with support for light and dark mode classes (`.dark`).
2. Tailwind Config (`tailwind.config.ts`): Extend theme colors using `hsl(var(--primary) / )` to ensure Tailwind opacity modifiers (e.g., `bg-primary/50`) work correctly.
3. Typography & Elevation Scales: Extend font family, letter spacing, and shadow scales per design token inputs.