Shadcn.io is not affiliated with official shadcn/ui
Account 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
Configure accessibility preferences instantly with preset profiles using this accessibility block for React and Next.js. Features four selectable accessibility profiles (Standard, Low Vision, Motor, Cognitive) that apply grouped settings at once, an active settings summary with animated pills, a font size slider with live preview, and a color vision filter selector. Built with TypeScript, shadcn/ui Badge, Button, and Slider components, motion/react layout animations, and Tailwind CSS. Perfect for inclusive SaaS dashboards, enterprise applications requiring WCAG compliance, and any product that values accessible user experiences.
Related Components
Appearance Settings
Theme and display preferences
Preferences
General user preferences
Language & Region
Language and locale settings
Notification Preferences
Email and push notification settings
Privacy Settings
Privacy and data control
Basic Information
Personal details form
FAQ
Was this page helpful?
Sign in to leave feedback.
Access Tokens
A personal access token management block for React and Next.js with token cards, masked key display, scope badges, usage stats, inline creation form, and copy-to-clipboard feedback built with shadcn/ui and Tailwind CSS
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