Design-Next

Navigation

Search pages and components

accessibility

A floating + header accessibility panel: text size, contrast, reduced motion, link highlighting, and a readable font. Preferences persist in localStorage and apply via data-attributes on <html>. This very docs site uses it — try the button in the bottom-right corner.

npx shadcn@latest add @design/accessibility

After install: import app/accessibility.css in your global stylesheet and inject NO_FLASH_SCRIPT in your document <head>.

Accessibility

Adjust the interface to your needs.

Text size
Contrast
Reduce motionMinimize animations and transitions.
Highlight linksOutline and underline interactive elements.
Readable fontUse a high-legibility typeface.