Theme Customizer

Настройка темы: пресеты, цвета, радиус, шрифт и живое превью. Pro · Лендинги и бренд › Бренд и дизайн-система

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add theme-customizer

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ThemeCustomizer } from 'valyro-ui-pro';

Prop	Type	Default
`presets` *	`ThemePreset[]`		Ready-made palettes.
`fonts` *	`ThemeFont[]`		Fonts to choose from.
`value`	`ThemeSettings`		The settings (controlled).
`defaultValue`	`ThemeSettings`		Initial `value` when uncontrolled.
`onValueChange`	`(value: ThemeSettings) => void`		Called with the new `value` when it changes.
`onSave`	`(value: ThemeSettings, css: string) => void`		Shows "Save theme", enabled while the settings differ from the last save; called with the settings and the same theme as CSS custom properties (`themeSettingsCSS`), ready for a stylesheet.
`previewExtra`	`ReactNode`		Extra content inside the preview, under the mock app.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Level of the title (default 2).
`labels`	`Partial<ThemeCustomizerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.