Reader-controlled display settings: text size, high contrast, a readable font, underlined links and reduced motion. Every option remaps the kit's own tokens and axes on one target element, so all components follow in light and dark without knowing about it. Optional persistence on the device.
Display settings
Library opening hours
Open Monday to Saturday, 9:00–19:00. The reading room closes thirty minutes earlier. See holiday hours.
Installation
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { AccessibilityToolbar } from "@vamos-ui/react";
<AccessibilityToolbar storageKey="display-settings">
<a href="/accessibility">Accessibility statement</a>
</AccessibilityToolbar>Text size sets the root font size, the way a browser's text-size setting works: the kit's type scale is in rem, so everything grows and reflows.
High contrast maps muted and subtle text to full text colour and hairlines to visible rules (--fg-muted, --line, --field-border …) — no colours of its own, so it works with any accent and theme. Subtrees that redefine those tokens themselves keep their own values.
Readable font sets data-font (default system); Reduce motion sets data-motion="off", which stops the kit's scroll reveals and motion. The OS reduced-motion setting is always respected anyway.
Examples
In a popover
layout="stacked" for a popover or sheet; applies to the page while it is open and is remembered under storageKey.
API
AccessibilityToolbar
| Prop | Type | Default |
|---|---|---|
value / defaultValue / onValueChange{ textSize: "default" | "large" | "larger", highContrast, readableFont, underlineLinks, reduceMotion }. | AccessibilityPreferences | — |
featuresWhich controls to show, in order. | AccessibilityFeature[] | all five |
targetWhere contrast, font, underline and motion apply. | HTMLElement | RefObject | () => HTMLElement | null | <html> |
textScaleRoot font-size factors for large / larger. | [number, number] | [1.15, 1.3] |
readableFontPresetdata-font preset used by Readable font. | string | "system" |
storageKeyPersist in localStorage; restored after mount (no hydration mismatch). | string | — |
layoutOne wrapping row or a column. | "bar" | "stacked" | "bar" |
hideTitleHide the title line. | boolean | — |
childrenExtra content at the end (a statement link). | ReactNode | — |
labelsDictionary namespace "accessibilityToolbar". | Partial<AccessibilityToolbarLabels> | — |
useAccessibilityPreferences(prefs, { target?, textScale?, readableFontPreset? })
| Prop | Type | Default |
|---|---|---|
prefsApplies the same settings without the toolbar (a settings page) and restores the element on cleanup. | AccessibilityPreferences | — |