Theme Customizer
Theme customizer: presets, colors, radius, font and a live preview. Pro · Landing pages and brand › Brand and design system
A theme editor: presets, the four brand colours, corner radius and font, with a live preview built from the kit's own components on the resulting --ui-* tokens, in light or dark.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add theme-customizernpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ThemeCustomizer } from 'valyro-ui-pro';Props
| 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. |
Related components
- Color Token — Color token: swatch or row with the variable, value and copy
- Type Specimen — Type specimen: a large glyph and typeface–role pairs
- Template Card — Template card: live thumbnail, badge, description and links
- Hero Section — Landing page hero
- Feature Grid — Feature grid
- Bento Grid — Responsive bento grid of cards in mixed sizes
- Logo Cloud — Customer logos
- Pricing Table — Pricing plans
- Comparison Table — Product comparison
- Testimonials — Customer testimonials
- FAQ Section — Frequently asked questions
- Award Badge — Award badge with a laurel wreath, stars and caption
Previous: Footer · Next: Color Token · All Landing pages and brand