Appearance

NxdsAppearanceSettings is a full settings panel for theme, typography, layout feel and interaction preferences. Render it inside NxdsAppearanceProvider. For a compact popover, use NxdsThemeQuickControl.

Installation

npx nxds-cli@latest add appearance

Run npx nxds-cli@latest init first if nxds isn’t set up in your app yet. See Install.

Usage

import {
  NxdsAppearanceSettings,
} from '@/components/nxds/components/appearance/appearance-settings/appearance-settings';
import {
  NxdsAppearanceBrandColorField,
} from '@/components/nxds/components/appearance/brand-color-field/brand-color-field';
import {
  NxdsAppearanceColorField,
} from '@/components/nxds/components/appearance/color-field/color-field';
import {
  NxdsAppearanceConfigPreview,
} from '@/components/nxds/components/appearance/config-preview/config-preview';
import {
  NxdsAppearanceProvider,
} from '@/components/nxds/components/appearance/provider/provider';
import { NxdsAppearanceScript } from '@/components/nxds/components/appearance/provider/script';
import {
  NxdsAppearanceSettingRow,
} from '@/components/nxds/components/appearance/setting-row/setting-row';
import {
  NxdsThemeQuickControl,
} from '@/components/nxds/components/appearance/theme-quick-control/theme-quick-control';

Props

NxdsAppearanceBrandColorField

NxdsAppearanceBrandColorField props
Prop	Type	Default	Description
`label`Required	`string`	No default documented	No description
`onChange`Required	`(hex: string) => void`	No default documented	No description
`value`Required	`string`	No default documented	No description

NxdsAppearanceColorField

NxdsAppearanceColorField props
Prop	Type	Default	Description
`label`Required	`string`	No default documented	No description
`onChange`Required	`(hex: string) => void`	No default documented	No description
`value`Required	`string`	No default documented	No description

NxdsAppearanceConfigPreview

NxdsAppearanceConfigPreview props
Prop	Type	Default	Description
`resolvedMode`Required	`NxdsResolvedAppearanceMode`	No default documented	No description
`state`Required	`NxdsAppearanceState`	No default documented	No description

NxdsAppearanceProvider

NxdsAppearanceProvider props
Prop	Type	Default	Description
`cookieOptions`	`NxdsAppearanceCookieOptions`	No default documented	No description
`cookieWriteKey`	`string \| false`	`false`	Cookie the provider writes so your server can render the saved appearance. The client never reads it.
`defaultState`	`NxdsAppearanceState`	No default documented	No description
`onStateChange`	`((state: NxdsAppearanceState) => void)`	No default documented	No description
`state`	`NxdsAppearanceState`	No default documented	No description
`storageKey`	`string \| false`	`"nxds-appearance"`	localStorage key for the saved appearance. The head script reads it before first paint and the provider after mount, overriding `defaultState`. Pass `false` to turn it off.

NxdsAppearanceScript

NxdsAppearanceScript props
Prop	Type	Default	Description
`defaultState`	`NxdsAppearanceState`	No default documented	No description
`nonce`	`string`	No default documented	No description
`storageKey`	`string \| false`	No default documented	No description

NxdsAppearanceSettingRow

NxdsAppearanceSettingRow props
Prop	Type	Default	Description
`description`	`string`	No default documented	No description
`label`Required	`string`	No default documented	No description

NxdsAppearanceSettings

NxdsAppearanceSettings adds no props of its own; it accepts the props of the element or primitive it wraps.

NxdsThemeQuickControl

NxdsThemeQuickControl props
Prop	Type	Default	Description
`onCustomize`	`(() => void)`	No default documented	No description

Vue Appearance is coming soon

Appearance isn't in the Vue package yet. The React version is ready to use today.