Style Presets

Style cards with previews and weights. Pro · Image generation › Prompt and settings

Grid of 4:5 style cards (preview with the name over it), multi-select with strengths, search and categories.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add style-presets

npm install valyro-ui-pro

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

Prop	Type	Default
`presets` *	`readonly StylePreset[]`		Styles shown as cards; `category` feeds the filter, and search matches every text field.
`value`	`StyleSelection[]`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`StyleSelection[]`	`[]`	Initial `value` when uncontrolled.
`onValueChange`	`(selection: StyleSelection[]) => void`		Called with the new `value` when it changes.
`multiple`	`boolean`	`true`	Allow several styles. Default true.
`max`	`number`		Most styles at once (multiple only).
`weights`	`boolean`	`true`	Strength chip on each selected card; it opens a 0–2 slider. Default true.
`filters`	`boolean`	`true`	Search field and category filter. Default true.
`minCardWidth`	`number`	`132`	Narrowest card. Default 132.
`size`	`'sm' \| 'md'`	`'md'`	`sm` tightens the grid and uses smaller names.
`disabled`	`boolean`	`false`	Disables picking styles, clearing and the strength sliders; search and filters stay usable.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<StylePresetsLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Prompt Editor — Prompt and negative prompt: weights, LoRA, autocomplete, token count
Generation Settings — Model, sampler, steps, CFG, size, presets
Aspect Ratio Picker — Aspect ratio and exact size
Seed Input — Seed: random, fixed, increment
LoRA Stack — LoRA stack: strengths, toggles, order, trigger words
Reference Image Input — Reference image for img2img and ControlNet
Generation Progress — Steps, ETA, live latent preview, queue
Image Result Grid — Result gallery with actions and a lightbox
Image Compare — Before/after comparison: slider, side by side, overlay
Inpaint Canvas — Inpainting mask and canvas outpainting
Generation History — Generation history by day, with filters
Image Adjustments — Color grading: upload, fit and seven filter sliders