Shadcn.io is not affiliated with official shadcn/ui
React Account Block Accessibility Settings
Accessibility settings panel with visual, motion, and assistive technology preferences for React apps
Make your Next.js application truly inclusive with this comprehensive accessibility settings panel. Features toggles for reduced motion, high contrast mode, and screen reader optimizations, plus a font size slider with live preview and color blind mode selector for deuteranopia, protanopia, and tritanopia. Built with shadcn/ui Card, Switch, Slider, Select, and RadioGroup components using Tailwind CSS and Lucide React icons. Clean section organization with visual previews helps users customize their experience—perfect for SaaS dashboards, enterprise applications, or any React app committed to WCAG compliance and universal design principles.
React Account Block Accessibility Settings preview
Installation
Related Components
React Account Block Appearance Settings
Theme and display preferences
React Account Block Preferences
General user preferences
React Account Block Language Region
Language and locale settings
React Account Block Notification Preferences
Email and push notification settings
React Account Block Privacy Settings
Privacy and data control
React Account Block Basic Information
Personal details form
FAQ
Two-Factor Authentication
Two-factor authentication setup with QR code display, authenticator app instructions, backup code generation, SMS option toggle, and verification code confirmation
Activity Log
Activity and audit log showing account events, security actions, login history, and system changes with filtering, timestamps, and IP addresses