Match your site’s design
Change text, colors and spacing without losing the component’s behavior.
Start with the settings that exist
The example page exposes only its supported controls. Some effects have no color control. The selected values are written to config.json and SelectedExample.tsx; editing config.json alone does not automatically update a rendered component.
Other component properties belong to its code API. Read the item guide before adding them; different examples do not share every property or duration limit.
Use your project’s styles
The kits inherit the host font. Keep the component’s CSS Module and map its colors and spacing to your project’s tokens where appropriate. Change text in the copy file or props named in the item guide.
Keep readable text, selected states, errors and keyboard focus visible. An accent color is not a substitute for a label or a state message. Check contrast again after changing a background or a color helper.
Check longer content
Test your longest button labels and headings on a narrow screen and at 200% zoom. Avoid fixed heights that cut off translations. Keep the original button or link semantics and any icon slot; private site icon paths are not part of the kit.