An appearance panel for theme, accent, corner radius, density, text size and sidebar side, beside a miniature app that restyles itself live as each control moves. A status dot tracks unsaved changes and Reset returns to the last save.
Changes preview instantly for everyone in Lumen Ops.
npx shadcn@latest add https://hyperblur.dev/r/app-appearance-settings.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/app-appearance-settings.tsx.
import { AppAppearanceSettings } from "@/components/hyperblur/app-appearance-settings"
<AppAppearanceSettings onSave={(v) => console.log(v)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | AppearanceValues | Controlled values: theme (dark, dim, light), accent, radius, density (compact, default, comfy), fontSize (13, 14, 15) and sidebar (left, right). Pair with onChange. | |
| defaultValue | Partial<AppearanceValues> | Initial values when uncontrolled. Missing keys fall back to dark, blue, 10px, default, 14 and left. | |
| onChange | (value: AppearanceValues) => void | Called on every change with all values. | |
| onSave | (value: AppearanceValues) => void | Called by Save. The saved values become the new reset point. | |
| accents | string[] | six colors | Accent swatches offered. |
| workspace | string | "Lumen Ops" | Workspace name used in the copy and the preview sidebar. |