Customization
Match your design through semantic tokens, component geometry, and per-instance overrides without replacing behavior.
Requires @axonyx/ui 0.0.82 or newer. The geometry contract covers Button, ordinary Card, and Field/Input/Select/Textarea. The React adapter uses the same CSS tokens as native Axonyx components.
Figma geometry
32px card padding, 20px spacing, 44px controls, and independent corner radii.
Account
This is a styling demonstration, not a save action.
Select and multiline controls
Share a 44px form baseline while keeping a 140px Textarea. Native selection, text editing, labels, and disabled options still work.
Dedicated Select and Textarea tokens require UI 0.0.82. When omitted, they fall back to shared input geometry. Reserve right-side padding for the select arrow. Textarea min-height is a minimum, not a fixed height: content, rows, and user resizing can make the control taller.
Choose the right override
Use a palette and style for visual identity, CSS variables for geometry, and className or style for one instance. Reusable recipes belong in an application stylesheet loaded after Foundry.
The live example uses inline custom properties; the Code tab shows the equivalent stylesheet recipe. React style objects use quoted custom-property keys, for example style={{ "--ax-card-radius": "12px" }}. In TypeScript, extend CSSProperties with the custom properties you use.
Components preserve their ax-* classes and native semantics. Tokens inherit into children, so scope them to the component that needs them. Load the exact design fonts and check mobile, focus, errors, and disabled states before calling a page pixel-perfect. Overrides do not change authorization or application state.
See the native Axonyx example