Notification Settings
Settings
Source and install need .
pnpm dlx shadcn@latest add @assembli/appearance-settingsAppearance Settings
The Appearance section of a settings page. Light, Dark and System cards each show a miniature app window (System split diagonally), and every preview follows the section live: the accent tints it, density spaces its rows, sidebar side flips it, high contrast darkens it. Plus density cards, a font size slider with a live sample, reduced motion and high contrast switches, and Reset to defaults.
Props
Other props pass through to the root element.
value
AppearanceValue
defaultValue
AppearanceValue
onValueChange
(value: AppearanceValue) => void
Called on every change. Apply the theme, accent and so on here; the component only previews them.
defaults
AppearanceValue
Default
DEFAULT_APPEARANCEWhat "Reset to defaults" returns to.
accents
AppearanceAccent[]
Default
DEFAULT_ACCENTSfontSizes
{ min: number; max: number }
Default
{ min: 12, max: 18 }Font size range in px.
title
React.ReactNode
Default
"Appearance"description
React.ReactNode
Default
"Make the app yours. Changes apply on this device right awa…
| Description | |||
|---|---|---|---|
| value | AppearanceValue | – | |
| defaultValue | AppearanceValue | – | |
| onValueChange | (value: AppearanceValue) => void | – | Called on every change. Apply the theme, accent and so on here; the component only previews them. |
| defaults | AppearanceValue | DEFAULT_APPEARANCE | What "Reset to defaults" returns to. |
| accents | AppearanceAccent[] | DEFAULT_ACCENTS | |
| fontSizes | { min: number; max: number } | { min: 12, max: 18 } | Font size range in px. |
| title | React.ReactNode | "Appearance" | |
| description | React.ReactNode | "Make the app yours. Changes apply on this device right awa… |
