## Display Settings (S—251)

Reading and display preferences with a live preview: text size, contrast, reduced motion, line spacing and density.

- URL: https://sundaeui.dev/components/display-settings
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/display-settings.json`
- Tags: display, settings, preferences, contrast, text-size, accessibility

Every control updates the sample card above it, so people see the effect before they leave the page. Settings map to CSS variables you can apply app-wide.
Reset returns to defaults; the summary lists what differs from them.

### Usage

```tsx
import { DisplaySettings } from '@/components/sundae/display-settings'

<DisplaySettings />
```

### Props

- `value / defaultValue` (`Prefs`): Size, contrast, motion, spacing, density.
- `onChange` (`(p: Prefs) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Account preferences, reading apps, accessibility menus.

### When not to use

- OS-level settings the browser already exposes.

### Accessibility

- Controls are a slider, switches and a radiogroup with clear labels.
- The preview is aria-hidden; the summary text is the accessible readout.
- Reduced motion removes the movement and keeps every state change.