Design tokens

Change corners in one scope

--neu-radius is a shared foundation token. Compare square corners with 6px corners in Input and a medium Button. Only descendants of each CSS scope receive its override. Different sizes may consume a different radius token.

Use your own namespace for application layout variables; use public --neu-* tokens to customize Neural components.

Apply an override globally

Place the root override after the Core SCSS import in styles.scss. It affects descendants that consume --neu-radius unless a more specific declaration replaces it. A shared token is broader than a single component.

@use '@neural-ui/core/styles' as *;

:root {
  --neu-radius: 6px;
}

Customize a Button background

The colored Button in the first example scopes four public Button tokens: background, foreground, border and hover background. They apply to its solid brand treatment; do not assume the same tokens change every variant.

The background expression falls back to the semantic solid color when a usable component value is absent. Once the component token has a value, changing the semantic fallback does not replace it. Set a valid foreground and hover pair rather than changing background alone.

/* Fragment: local styles for a solid brand Button. */
.custom-action {
  --neu-button-background: #175d95;
  --neu-button-foreground: #ffffff;
  --neu-button-border: #175d95;
  --neu-button-background-hover: #124c7d;
}

Read the effective value

Foundation tokens describe shared scales such as spacing and radius. Semantic tokens describe roles such as text, surface or primary. Component tokens narrow a role to a control.

The final CSS value depends on mode, preset, scope, specificity and var() fallback resolution. The reference lists a declared default, not a universal computed value. A var(--neu-surface) default changes when the inherited surface changes.

All public tokens

Search by token, owner or description. The table exposes every public token in the installed package; it initially shows 40 rows and the Show all action reveals the rest, displaying the current total. Filtered results are not capped.

Default source identifies where the value is declared. Fallback lists referenced tokens; consumed by identifies recorded consumers, not a guarantee that every visual state uses that token. No private implementation tokens are included.