Troubleshooting

Trace the contract, not a screenshot.

Most installation issues reduce to an incorrect registry URL, missing generated CSS, a mismatched import alias, or an application override.

Registry item returns 404

Use the exact registryUrl from the catalogue or component contract. Registry names use gummy-{slug}.

Component has no Gummy material

Import the generated shared theme and component style files once from the global stylesheet or root layout.

Base UI cannot be resolved

Install through the registry command so the declared @base-ui/react dependency is installed with the editable source.

Dark or RTL behavior is missing

Set data-theme="dark" for the dark environment and a real dir boundary for bidirectional layout.

Motion remains enabled

Check the generated styles are loaded and no application rule overrides prefers-reduced-motion: reduce.

Source viewer cannot load

Open the public registry URL directly; its JSON contains the same editable public files used by the viewer.

Use a repeatable diagnostic sequence

  1. Open the registry URL from the component contract and confirm the response names the expected item.
  2. Inspect the installed file paths and imports. Check that the TypeScript alias, bundler alias and components.json agree.
  3. Confirm the shared theme loads before the component stylesheet and that application overrides load after both.
  4. Reproduce the problem with the smallest component state in a clean route. Remove surrounding layout and providers one at a time rather than changing the installed semantics.
  5. Run type checking and the production build, then verify keyboard, focus, zoom, direction and reduced-motion behavior in the browser where the issue occurs.

Compare behavior with the published component contract rather than trying to match a screenshot pixel for pixel. Fonts, application tokens and viewport conditions can change appearance without changing the required interaction.

Prepare a useful support report

Include the exact registry URL, installed item name, framework and version, package manager, browser, relevant assistive technology, reproduction steps, expected behavior and actual behavior. Paste the smallest safe error excerpt. Remove access tokens, environment variables, customer data, proprietary source and full build logs that may contain local paths or secrets.

If the clean reproduction still fails, send those details through the support route. If the clean version works, add your application layers back until the responsible alias, provider, stylesheet or override is identified.