Shadcn.io is not affiliated with official shadcn/ui
Account Accessibility Settings
A split-panel accessibility settings block for React and Next.js with live preview, tabbed categories, font size stepper, and contrast controls built with shadcn/ui and Tailwind CSS
Configure accessibility preferences with instant visual feedback using this split-panel settings block for React and Next.js. Features tabbed category navigation across Text, Visual, and Motion settings with a live preview pane that reflects font size, line spacing, contrast, and focus indicator changes in real time. Built with TypeScript, shadcn/ui Select, Switch, and Button components, motion/react tab transition animations, and Tailwind CSS. Perfect for inclusive SaaS platforms, enterprise applications requiring WCAG compliance, and any product committed to accessible user experiences.
Related Components
Accessibility Overview
General accessibility preferences panel
Appearance Settings
Theme and appearance customization
Theme Customizer
Custom theme color picker
Preferences
General account preferences
Language & Region
Locale and timezone settings
Content Preferences
Content display preferences
FAQ
Was this page helpful?
Sign in to leave feedback.
Accessibility
An accessibility profile selector block for React and Next.js with preset profiles, active settings summary pills, font size slider, and color vision controls built with shadcn/ui and Tailwind CSS
Account Delegation
A delegation dashboard for React and Next.js with permission matrix table, stats bar, pending invites, and inline invite form built with shadcn/ui and Tailwind CSS