Visual style panelPro
An inspector for the selected element that applies live and writes back to code, no tokens spent: layout with an alignment matrix, a box model you scrub, size, type, the app's palette, border and opacity, with a dot on every property that differs from the code.
On this page
ProPick an element on the booking page and change its spacing, type, color and border. The page updates as you drag and dots mark what differs from the code.
Installation
Usage
import { VisualStylePanel, visualStyleToCss } from "@/components/ui/chatcn/pro/visual-style-panel"
<VisualStylePanel element={{ tag: "button", name: "Primary button", source: "app/page.tsx:56" }}
base={styleInCode} value={style} onValueChange={setStyle} colors={palette} />Only sections whose properties appear in base or value show, so a heading gets type controls and a container gets layout. Apply the result to the preview with visualStyleToCss, and diff it against base with changedKeys to batch the edits for saving.
Examples
States
ProA heading with type edits, a flex container with the alignment matrix, nothing selected and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
element | { tag, name?, source? } | Without it the panel explains how to pick |
value, defaultValue, onValueChange | VisualStyle | Called on every change, live while you drag, with the key that changed |
base | VisualStyle | Values in code. Differences get a dot that resets them, and Reset all |
colors | { name, value }[] | The app's palette for text, fill and border |
fonts | { label, value }[] | Font choices, each shown in its own face |
disabled, disabledReason | boolean, ReactNode |
Keyboard
| Key | Action |
|---|---|
ArrowUp ArrowDown | Step a number by 1, Shift by 10, Alt by 0.1 |
Enter | Commit a typed number |
Escape | Revert a typed number |
| Arrow keys in the alignment matrix | Move the alignment |
Accessibility
- Number fields are spinbuttons with their unit in the value text. Drag to scrub, or click to type.
- Changed properties carry a dot and the accent, never color alone, and the dot is a button named Reset with the original value in its tooltip.
- The alignment matrix is a radio group whose cells are named top start, middle center and so on.
Motion
- Nothing moves on its own: values change as you drag. Segmented controls and menus use the shared 150 and 180 ms transitions, and reduced motion keeps only fades.